@font-face {
    font-family: "Pretendard";
    font-style: normal;
    font-weight: 45 920;
    font-display: swap;
    src: url("../../firm_assets/fonts/PretendardVariable.woff2") format("woff2-variations");
}

:root {
/* landing */
--landing-nav-height: 53px;
    /* Typography */
    --font-family-base: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bs-body-font-family: var(--font-family-base);


    --font-size-display: clamp(1.75rem, 3.6vw, 2.75rem);      /* 28px ~ 44px */
    --font-size-title-lg: clamp(1.375rem, 2.8vw, 1.875rem);    /* 22px ~ 30px */
    --font-size-title: clamp(1.25rem, 2.3vw, 1.625rem);        /* 20px ~ 26px */
    --font-size-subtitle: clamp(1.125rem, 1.8vw, 1.25rem);     /* 18px ~ 20px */
    --font-size-body: clamp(1rem, 1.25vw, 1.0625rem);          /* 16px ~ 17px */
    --font-size-body-sm: clamp(0.875rem, 1vw, 0.9375rem);      /* 14px ~ 15px */
    --font-size-caption: clamp(0.8125rem, 0.9vw, 0.875rem);    /* 13px ~ 14px */
    --font-size-tiny: clamp(0.75rem, 0.75vw, 0.8125rem);       /* 12px ~ 13px */

	
    --line-height-tight: 1.25;
    --line-height-title: 1.35;
    --line-height-base: 1.55;
    --line-height-reading: 1.65;

    /* Color */
    --color-text-primary: #182230;
    --color-text-secondary: #697586;
    --color-text-subtle: #8a94a6;
    --color-text-muted: #a0aec0;

    /* --color-bg-page: #f7f8fb; */
    --color-bg-page: #f3f3f6;
    --color-bg-shell: #e8ecf3;
    --color-bg-panel: #ffffff;
    --color-border-subtle: #e7eaf0;

    --color-primary: #2563eb;
    --color-primary-rgb: 37, 99, 235;
    --color-primary-dark: #00275e;
    --color-primary-strong-rgb: 30, 64, 175;
    --color-primary-light: #dbeafe;
    --color-primary-light-rgb: 219, 234, 254;
    --color-success: #16a34a;
    --color-success-rgb: 22, 163, 74;
    --color-success-light: #dcfce7;
    --color-warning: #d97706;
    --color-warning-rgb: 217, 119, 6;
    --color-warning-light: #fef3c7;
    --color-danger: #dc2626;
    --color-danger-rgb: 220, 38, 38;
    --color-danger-light: #fee2e2;
    --color-info: #7c3aed;
    --color-info-rgb: 124, 58, 237;
    --color-info-light: #ede9fe;
    --color-muted: #697586;

    /* Radius */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;

    /* Shadow */
    --shadow-card: 0 4px 12px rgba(17, 24, 39, .08);
    --shadow-panel: 0 16px 44px rgba(17, 24, 39, .04);
    --shadow-shell: 0 0 0 1px rgba(15, 23, 42, .05), 0 24px 70px rgba(15, 23, 42, .12);
}

@media (max-width: 420px) {
    :root {
        --app-page-padding-x: 16px;

        --font-size-display: 24px;
        --font-size-title-lg: 22px;
        --font-size-title: 20px;
        --font-size-subtitle: 18px;
        --font-size-body: 16px;
        --font-size-body-sm: 15px;
        --font-size-caption: 14px;
        --font-size-tiny: 13px;
    }
}
 .text-center {
    text-align: center;
}

.text-danger {
    color: var(--color-danger);
}
.text-success {
    color: var(--color-success);
}
.text-warning {
    color: var(--color-warning);
}
.text-info {
    color: var(--color-info);
}
.text-muted {
    color: var(--color-text-muted);
}
.text-hero {
    font-size: var(--font-size-display);
    line-height: var(--line-height-title);
}
.text-auth-title {
    font-size: var(--font-size-display);
    line-height: var(--line-height-title);
}
.text-display {
    font-size: var(--font-size-display);
    line-height: var(--line-height-title);
}
.text-title-lg {
    font-size: var(--font-size-title-lg);
    line-height: var(--line-height-title);
}
.text-page-title {
    font-size: var(--font-size-title-lg);
    line-height: var(--line-height-title);
}
.text-card-title-lg {
    font-size: var(--font-size-title);
    line-height: var(--line-height-title);
}
.text-card-title {
    font-size: var(--font-size-subtitle);
    line-height: var(--line-height-title);
}
.text-section-title {
    font-size: var(--font-size-title);
    line-height: var(--line-height-title);
}
.text-section-title-sm {
    font-size: var(--font-size-subtitle);
    line-height: var(--line-height-title);
}	
.text-body-lg {
    font-size: var(--font-size-body);
    line-height: var(--line-height-reading);
}
.text-body {
    font-size: var(--font-size-body);
    line-height: var(--line-height-reading);
}
.text-body-sm {
    font-size: var(--font-size-body-sm);
    line-height: var(--line-height-reading);
}
.text-caption {
    font-size: var(--font-size-caption);
}
.text-meta {
    font-size: var(--font-size-caption);
}
.text-meta-sm {
    font-size: var(--font-size-tiny);
}
.text-meta-xs {
    font-size: var(--font-size-tiny);
}