/*
 * tokens.css
 * Single source of truth for all design tokens.
 * Every other CSS file consumes variables from here — never hardcode values.
 */

:root {

    /* ── Brand colours ───────────────────────────────────────────────── */
    --color-red:           #C41E35;
    --color-red-dark:      #A8182C;
    --color-red-deep:      #8F1522;
    --color-red-light:     #FDF0F2;
    --color-red-tint:      #FAE3E6;

    --color-navy:          #1B2A5C;
    --color-navy-dark:     #111C3E;
    --color-navy-deep:     #0A1228;
    --color-navy-light:    #EEF1F8;
    --color-navy-tint:     #D8DFF0;

    --color-maroon:        #6B1020;

    /* ── Neutrals ────────────────────────────────────────────────────── */
    --color-white:         #FFFFFF;
    --color-cream:         #FAFAF8;
    --color-cream-dark:    #F5F3EE;
    --color-border:        #E5E3DC;
    --color-border-light:  #EDEBE5;
    --color-border-dark:   #D0CEC7;

    --color-gray-50:       #F9F9F7;
    --color-gray-100:      #F2F0EB;
    --color-gray-200:      #E5E3DC;
    --color-gray-300:      #C8C6BE;
    --color-gray-400:      #9A9890;
    --color-gray-500:      #6B6963;
    --color-gray-600:      #4A4845;
    --color-gray-700:      #333230;
    --color-gray-800:      #1E1D1B;
    --color-gray-900:      #0F0F0E;

    /* ── Success / accent ────────────────────────────────────────────── */
    --color-green:         #1D9E75;
    --color-green-light:   #EBF7F1;
    --color-gold:          #C8A84B;

    /* ── Typography ──────────────────────────────────────────────────── */
    --font-sans:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                   Helvetica, Arial, sans-serif;
    --font-serif:  Georgia, 'Times New Roman', Times, serif;
    --font-mono:   'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono',
                   monospace;

    /* Type scale */
    --text-xs:     0.6875rem;   /* 11px */
    --text-sm:     0.75rem;     /* 12px */
    --text-base:   0.875rem;    /* 14px */
    --text-md:     1rem;        /* 16px */
    --text-lg:     1.125rem;    /* 18px */
    --text-xl:     1.25rem;     /* 20px */
    --text-2xl:    1.5rem;      /* 24px */
    --text-3xl:    1.875rem;    /* 30px */
    --text-4xl:    2.25rem;     /* 36px */
    --text-5xl:    2.75rem;     /* 44px */

    /* Line heights */
    --leading-tight:  1.25;
    --leading-snug:   1.375;
    --leading-normal: 1.5;
    --leading-relaxed:1.65;
    --leading-loose:  1.8;

    /* Font weights */
    --weight-normal:  400;
    --weight-medium:  500;
    --weight-semibold:600;
    --weight-bold:    700;

    /* ── Spacing scale ───────────────────────────────────────────────── */
    --space-1:   0.25rem;   /* 4px  */
    --space-2:   0.5rem;    /* 8px  */
    --space-3:   0.75rem;   /* 12px */
    --space-4:   1rem;      /* 16px */
    --space-5:   1.25rem;   /* 20px */
    --space-6:   1.5rem;    /* 24px */
    --space-8:   2rem;      /* 32px */
    --space-10:  2.5rem;    /* 40px */
    --space-12:  3rem;      /* 48px */
    --space-16:  4rem;      /* 64px */
    --space-20:  5rem;      /* 80px */
    --space-24:  6rem;      /* 96px */

    /* ── Layout ──────────────────────────────────────────────────────── */
    --container-max:    1200px;
    --container-wide:   1400px;
    --container-narrow: 800px;
    --container-pad:    1.5rem;   /* 24px sides — matches --space-6 */
    --container-pad-sm: 1rem;    /* 16px on mobile — matches --space-4 */

    /* ── Borders & Radii ─────────────────────────────────────────────── */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-xl:   12px;
    --radius-2xl:  16px;
    --radius-full: 9999px;

    --border-width:      1px;
    --border-width-sm:   0.5px;
    --border-width-lg:   2px;

    /* ── Shadows ─────────────────────────────────────────────────────── */
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:   0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
    --shadow-lg:   0 8px 32px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
    --shadow-form: 0 4px 24px rgba(0,0,0,0.09);

    /* ── Transitions ─────────────────────────────────────────────────── */
    --transition-fast:   120ms ease;
    --transition-base:   200ms ease;
    --transition-slow:   350ms ease;
    --transition-slide:  380ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Z-index scale ───────────────────────────────────────────────── */
    --z-below:    -1;
    --z-base:      0;
    --z-raised:    10;
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-modal:     400;
    --z-toast:     500;

    /* ── Header height ───────────────────────────────────────────────── */
    --header-announcement: 36px;
    --header-nav:          60px;
    --header-total:        96px; /* 36px announcement + 60px nav — update if heights change */
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-slow: 0ms;
        --transition-slide: 0ms;
    }
}