:root {
    --color-brand-dark: #10243e;
    --color-primary: #2864f0;
    --color-accent: #ffd84d;
    --color-background: #f5f7fa;
    --color-surface: #ffffff;
    --color-text-primary: #172033;
    --color-text-secondary: #667085;
    --color-border: #dde3eb;
    --color-success: #168a5b;
    --color-warning: #e87920;
    --color-danger: #d64545;
    --color-on-brand: #ffffff;
    --color-on-brand-muted: #d5deea;
    --color-overlay: rgba(16, 36, 62, 0.52);

    --space-1: 8px;
    --space-2: 12px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;

    --radius-input: 12px;
    --radius-card: 16px;
    --radius-button: 14px;
    --radius-dialog: 20px;
    --radius-pill: 999px;

    --shadow-card: 0 2px 8px rgba(16, 36, 62, 0.06);
    --shadow-elevated: 0 12px 32px rgba(16, 36, 62, 0.12);

    --text-xs: 12px;
    --text-sm: 14px;
    --text-md: 16px;
    --text-lg: 20px;
    --text-xl: 24px;
    --text-display: 32px;

    --line-tight: 1.2;
    --line-body: 1.5;

    --motion-fast: 140ms;
    --motion-base: 220ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);

    --content-mobile: 100%;
    --content-tablet: 760px;
    --content-desktop: 1040px;

    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --color-brand-dark: #081727;
    --color-primary: #4f7df3;
    --color-background: #0b1421;
    --color-surface: #142033;
    --color-text-primary: #f5f7fa;
    --color-text-secondary: #a7b3c4;
    --color-border: #2b3a4e;
    --color-success: #35ad7b;
    --color-warning: #f09242;
    --color-danger: #ef6b6b;
    --color-on-brand-muted: #c4cfdd;
    --color-overlay: rgba(3, 9, 17, 0.72);

    --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.18);
    --shadow-elevated: 0 16px 40px rgba(0, 0, 0, 0.34);
}