: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 1px 2px rgba(16, 36, 62, 0.04), 0 2px 8px rgba(16, 36, 62, 0.06);
    --shadow-hover: 0 6px 16px rgba(16, 36, 62, 0.1), 0 2px 6px rgba(16, 36, 62, 0.06);
    --shadow-elevated: 0 12px 32px rgba(16, 36, 62, 0.12);
    --shadow-accent: 0 6px 18px rgba(255, 216, 77, 0.42);
    --shadow-primary: 0 6px 18px rgba(40, 100, 240, 0.32);

    --gradient-hero: radial-gradient(120% 120% at 100% 0%, #1c3a63 0%, var(--color-brand-dark) 58%);
    --gradient-accent: linear-gradient(135deg, #ffe37a 0%, var(--color-accent) 100%);
    --gradient-primary: linear-gradient(135deg, #3d78ff 0%, var(--color-primary) 100%);

    --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;
    --motion-slow: 420ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 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-hover: 0 8px 22px rgba(0, 0, 0, 0.32);
    --shadow-elevated: 0 16px 40px rgba(0, 0, 0, 0.34);
    --shadow-accent: 0 6px 20px rgba(255, 216, 77, 0.24);
    --shadow-primary: 0 6px 20px rgba(79, 125, 243, 0.36);

    --gradient-hero: radial-gradient(120% 120% at 100% 0%, #12253d 0%, var(--color-brand-dark) 60%);
}