:root {
    /* Shell */
    --app-shell-max-width: 800px;
    --app-page-padding-x: 20px;
    --app-page-padding-y: 20px;

    /* Typography */
    --font-family-base: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --font-size-hero: 36px;
    --font-size-auth-title: 34px;
    --font-size-display: 28px;
    --font-size-title-lg: 24px;
    --font-size-page-title: 22px;
    --font-size-card-title-lg: 20px;
    --font-size-section-title: 19px;
    --font-size-section-title-sm: 18px;
    --font-size-card-title: 17px;
    --font-size-body-lg: 16px;
    --font-size-body: 15px;
    --font-size-body-sm: 14px;
    --font-size-caption: 13px;
    --font-size-meta: 12px;
    --font-size-meta-sm: 11px;
    --font-size-meta-xs: 10px;

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

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-heavy: 800;

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

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

    --color-primary: #244f9e;
    --color-primary-strong: #17346b;
    --color-success: #047857;
    --color-warning: #a15c07;
    --color-danger: #b42318;
    --color-info: #6941c6;

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

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

    /* Shadow */
    --shadow-panel: 0 16px 44px rgba(17, 24, 39, .08);
    --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-hero: 32px;
        --font-size-auth-title: 30px;
        --font-size-display: 26px;
        --font-size-title-lg: 22px;
        --font-size-page-title: 21px;
        --font-size-card-title-lg: 19px;
        --font-size-section-title: 18px;
        --font-size-section-title-sm: 17px;
        --font-size-card-title: 16px;
        --font-size-body-lg: 15px;
    }
}