:root {
    --font-body: "Avenir Next", "Segoe UI Variable Text", "Trebuchet MS", sans-serif;
    --font-heading: "Avenir Next", "Segoe UI Variable Display", "Trebuchet MS", sans-serif;
    --color-bg: #f5f8fc;
    --color-bg-deep: #e9eff8;
    --color-surface: rgba(255, 255, 255, 0.97);
    --color-surface-alt: #f3f7fc;
    --color-surface-strong: #dce5f1;
    --color-surface-dark: #081a39;
    --color-border: #d5deeb;
    --color-border-strong: #9fb1cb;
    --color-text: #111b2e;
    --color-text-soft: #60718d;
    --color-text-inverse: #f8fbff;
    --color-primary: #2348a5;
    --color-primary-strong: #102f7e;
    --color-primary-soft: #e4ecfb;
    --color-accent: #5f87d8;
    --color-accent-soft: #edf3ff;
    --color-info: #285ab6;
    --color-info-soft: #e7efff;
    --color-success: #14745d;
    --color-success-soft: #e3f3ed;
    --color-warning: #8e6a35;
    --color-warning-soft: #f7efe0;
    --color-danger: #b15555;
    --color-danger-soft: #f9e7e7;
    --color-shadow: rgba(10, 24, 52, 0.08);
    --color-shadow-strong: rgba(10, 24, 52, 0.18);
    --color-overlay: rgba(7, 16, 33, 0.46);
    --radius-xs: 0.7rem;
    --radius-sm: 0.9rem;
    --radius-md: 1.15rem;
    --radius-lg: 1.55rem;
    --radius-xl: 1.95rem;
    --space-1: 0.35rem;
    --space-2: 0.7rem;
    --space-3: 0.95rem;
    --space-4: 1.3rem;
    --space-5: 1.8rem;
    --space-6: 2.6rem;
    --space-7: 3.5rem;
    --shadow-sm: 0 12px 30px var(--color-shadow);
    --shadow-md: 0 24px 60px var(--color-shadow);
    --shadow-lg: 0 32px 78px var(--color-shadow-strong);
    --transition-fast: 150ms ease;
    --transition-base: 240ms ease;
    --transition-slow: 360ms ease;
}