:root {
    /* ── Colors ── */
    --color-primary: #1e3a5f;
    --color-primary-light: #2a4d7a;
    --color-primary-dark: #152c49;
    --color-accent: #c5973e;
    --color-accent-light: #d4ab5e;
    --color-accent-dark: #a67d2e;

    --color-bg: #faf7f2;
    --color-bg-card: #ffffff;
    --color-bg-sidebar: var(--color-primary);

    --color-text: #1a1a2e;
    --color-text-muted: #6b7280;
    --color-text-on-primary: #ffffff;
    --color-text-on-accent: #ffffff;

    --color-border: #e5e0d8;
    --color-border-light: #f0ebe4;
    --color-bg-muted: #f8f9fa;

    --color-success: #2d7a4f;
    --color-error: #c0392b;
    --color-warning: #d4a017;
    --color-secondary: #00bcd4;
    --color-info: #2980b9;

    --color-success-bg: #eaf5ef;
    --color-error-bg: #fbeae8;
    --color-warning-bg: #fdf6e3;
    --color-info-bg: #e8f4fb;

    --color-accent-focus: rgba(197, 151, 62, 0.4);
    --color-accent-focus-light: rgba(197, 151, 62, 0.25);
    --color-bg-hover: rgba(0, 0, 0, 0.05);

    /* ── Typography — fluid ── */
    --font-family: 'Heebo', sans-serif;
    --font-size-base: clamp(0.85rem, 0.8rem + 0.2vw, 1rem);
    --font-size-sm: 0.875rem;
    --font-size-lg: 1.15rem;
    --font-size-xl: clamp(1.25rem, 1rem + 0.5vw, 1.5rem);
    --font-size-2xl: clamp(1.5rem, 1rem + 1vw, 2rem);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* ── Spacing — fluid ── */
    --space-xs: clamp(0.1875rem, 0.15rem + 0.1vw, 0.25rem);
    --space-sm: clamp(0.25rem, 0.15rem + 0.2vw, 0.5rem);
    --space-md: clamp(0.5rem, 0.3rem + 0.4vw, 1rem);
    --space-lg: clamp(0.75rem, 0.5rem + 0.6vw, 1.5rem);
    --space-xl: clamp(1rem, 0.6rem + 0.8vw, 2rem);
    --space-2xl: clamp(1.5rem, 0.8rem + 1.2vw, 3rem);

    /* ── Icons — fluid ── */
    --font-size-icon-lg: clamp(1.25rem, 1rem + 0.3vw, 1.5rem);
    --font-size-icon-hero: clamp(2.5rem, 1.5rem + 2vw, 4rem);
    --icon-size-md: clamp(3rem, 2rem + 1.5vw, 4rem);

    /* ── Borders & Radius — relative ── */
    --border-width-sm: 1px;
    --border-width-md: 0.125rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 1rem;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-sm: 0 1px 3px rgba(30, 58, 95, 0.06);
    --shadow-md: 0 4px 12px rgba(30, 58, 95, 0.08);
    --shadow-lg: 0 8px 30px rgba(30, 58, 95, 0.12);
    --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* ── Transitions ── */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* ── Layout — fluid ── */
    --sidebar-width: clamp(14.5rem, 16vw, 17rem);
    --topbar-height: clamp(2.75rem, 2.5rem + 0.5vw, 3.5rem);

    /* ── Card Grid ── */
    --card-min-width: 18rem;

    /* ── Auth Layout — fluid ── */
    --auth-brand-width: 40%;
    --auth-form-width: 60%;
    --auth-card-max-width: min(90vw, 30rem);
}