:root {
    /* Brand */
    --color-primary-50: #eef2ff;
    --color-primary-100: #e0e7ff;
    --color-primary-200: #c7d2fe;
    --color-primary-400: #818cf8;
    --color-primary-500: #6366f1;
    --color-primary-600: #4f46e5;
    --color-primary-700: #4338ca;
    --color-primary-900: #312e81;

    /* Neutrals */
    --color-ink-900: #0f172a;
    --color-ink-700: #334155;
    --color-ink-500: #64748b;
    --color-ink-300: #cbd5e1;
    --color-ink-200: #e2e8f0;
    --color-ink-100: #f1f5f9;
    --color-ink-50:  #f8fafc;
    --color-white: #ffffff;

    /* Semantic */
    --color-text: var(--color-ink-900);
    --color-text-muted: var(--color-ink-500);
    --color-border: var(--color-ink-200);
    --color-bg: var(--color-white);
    --color-bg-subtle: var(--color-ink-50);
    /* Surface = raised panels (cards, nav, inputs, modals). Flips in dark mode,
       while --color-white stays literally white for text on colored fills. */
    --color-surface: var(--color-white);
    --color-surface-raised: var(--color-white);
    --color-link: var(--color-primary-600);
    --color-success: #059669;
    --color-success-bg: #ecfdf5;
    --color-success-border: #a7f3d0;
    --color-danger: #dc2626;
    --color-danger-bg: #fef2f2;
    --color-danger-border: #fecaca;
    --color-warning: #d97706;
    --color-warning-bg: #fffbeb;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3.25rem;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-full: 999px;

    /* Layered, premium shadows */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.10), 0 2px 6px -2px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 16px 40px -8px rgba(15, 23, 42, 0.16), 0 6px 12px -6px rgba(15, 23, 42, 0.08);
    --shadow-xl: 0 32px 64px -16px rgba(15, 23, 42, 0.22);
    --shadow-primary: 0 10px 28px -8px rgba(79, 70, 229, 0.45);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
    --gradient-primary-soft: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
    --gradient-text: linear-gradient(115deg, #4f46e5 0%, #7c3aed 55%, #6366f1 100%);

    /* Motion */
    --transition-fast: 150ms ease;
    --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --ring: 0 0 0 3px var(--color-primary-100);

    --container-max: 1160px;
}

/* ---- Dark theme: overrides only the semantic + neutral ramp, so every component
   that uses tokens adapts automatically. CV template partials are self-contained
   (own literal colors) and stay light — a printed CV should always be on white. --- */
[data-theme="dark"] {
    color-scheme: dark;

    --color-ink-900: #eef1f8;
    --color-ink-700: #cbd5e1;
    --color-ink-500: #94a3b8;
    --color-ink-300: #3b4a6b;
    --color-ink-200: #2a3651;
    --color-ink-100: #1c2742;
    --color-ink-50:  #141d33;

    --color-text: #eef1f8;
    --color-text-muted: #94a3b8;
    --color-border: #2a3651;
    --color-bg: #0b1120;
    --color-bg-subtle: #0b1120;
    --color-surface: #141d33;
    --color-surface-raised: #1c2742;
    --color-link: #a5b4fc;

    /* Soft accent backgrounds become translucent indigo; their paired text lightens */
    --color-primary-50: rgba(99, 102, 241, 0.16);
    --color-primary-100: rgba(99, 102, 241, 0.26);
    --color-primary-200: rgba(99, 102, 241, 0.4);
    --color-primary-700: #c7d2fe;

    --color-success-bg: rgba(16, 185, 129, 0.16);
    --color-success-border: rgba(16, 185, 129, 0.4);
    --color-danger-bg: rgba(239, 68, 68, 0.16);
    --color-danger-border: rgba(239, 68, 68, 0.4);
    --color-warning-bg: rgba(217, 119, 6, 0.16);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 32px 64px rgba(0, 0, 0, 0.66);
    --shadow-primary: 0 12px 32px -6px rgba(99, 102, 241, 0.55);
}