:root {
    /* Spacing — 4px base unit */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Border Radius */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px; /* pill shapes */

    /* Z-Index */
    --z-base:     0;
    --z-raised:   10;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-modal:    300;
    --z-toast:    400;

    /* Content Widths */
    --width-full:     1440px;
    --width-wide:     1200px;
    --width-content:   860px;
    --width-narrow:    640px;
    --width-sidebar:   300px;

    /* Navbar */
    --navbar-height:  68px;
    --navbar-height-scrolled: 56px;

    /* Type Scale */
    --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:  2rem;
    --text-4xl:  2.75rem;

    /* Fonts */
    --font-body:    'Inter', system-ui, sans-serif;
    --font-heading: 'Playfair Display', Georgia, serif;

    /* Overlays — theme-independent, for image surfaces */
    --overlay-image:    rgba(0,0,0,0.35);
    --overlay-text:     rgba(255,255,255,0.95);
    --overlay-text-sub: rgba(255,255,255,0.70);
    --overlay-panel:    rgba(0, 0, 0, 0.62);  /* nav panel backdrop */

    /* Third-party brand logos (mills, partners) arrive as dark ink on
       transparent backgrounds and aren't ours to recolor. A fixed warm-white
       plate guarantees legible contrast for any uploaded logo in both themes —
       per-image dark/light detection isn't feasible without JS/pixel analysis. */
    --surface-logo-plate:        #fbf9f5;
    --surface-logo-plate-border: rgba(0, 0, 0, 0.06);

    /* Motion */
    --duration-fast:   150ms;
    --duration-base:   200ms;
    --duration-slow:   300ms;
    --duration-reveal: 400ms;
    --ease:            ease;
    --ease-out:        ease-out;

    /* Shorthand transition tokens */
    --transition-fast: var(--duration-fast) var(--ease);
    --transition-base: var(--duration-base) var(--ease);
}