/* ==========================================================================
   tokens.css — Design tokens (site-wide)
   --------------------------------------------------------------------------
   Single source of truth for colour, type, spacing, radius, shadow and motion.
   Load this BEFORE any other stylesheet.

   THEME: Garnet & Brass. Taken from the about.php design, which is the
   canonical identity. index.php and experience.php inherit it through the
   legacy aliases below — they were previously navy & gold and now follow
   automatically. Nothing else needs to change to retheme the site.

   Rule of thumb: if you are about to type a raw hex code, a pixel value for
   spacing, or a shadow into a component stylesheet — add a token here instead.
   ========================================================================== */

:root {

    /* ----------------------------------------------------------------------
       Colour — palette
       Raw values. Don't reference these directly in components; use the
       semantic aliases below so the palette can change without a find/replace.
       ---------------------------------------------------------------------- */
    --navy-900: #091122;   /* navy-deep */
    --navy-800: #0e1b33;   /* navy */
    --navy-700: #101f3b;   /* hero gradient top */
    --navy-600: #16264a;   /* navy-mid */

    --garnet-600: #7d1f2b;
    --garnet-500: #9a2733;  /* garnet-bright */

    --brass-500: #b08d4f;
    --brass-300: #cdb182;   /* brass-soft */

    --ink-900: #1a2233;
    --ink-600: #3a4354;     /* body copy inside cards */
    --ink-400: #5b6478;     /* mute */

    --grey-200: #e3e6ec;    /* line */
    --grey-100: #f5f5f8;    /* soft */

    --white: #ffffff;       /* paper */

    /* ----------------------------------------------------------------------
       Colour — semantic aliases
       These are what components should use.
       ---------------------------------------------------------------------- */
    --color-bg: var(--grey-100);
    --color-bg-raised: var(--white);
    --color-text: var(--ink-900);
    --color-text-body: var(--ink-600);
    --color-text-muted: var(--ink-400);
    --color-text-inverse: var(--white);

    --color-brand: var(--navy-800);
    --color-brand-deep: var(--navy-900);

    /* Brass = decorative. Borders, rules, glows, bullets, hero furniture. */
    --color-accent: var(--brass-500);
    --color-accent-soft: var(--brass-300);

    /* Garnet = active. Links, section rules, eyebrow labels, primary buttons.
       Deliberately distinct from brass: brass decorates, garnet means
       "you can do something here". Keep that distinction. */
    --color-action: var(--garnet-600);
    --color-action-bright: var(--garnet-500);

    --color-border: var(--grey-200);
    --color-border-strong: var(--brass-500);

    /* Legacy aliases — the navy/gold names index.css and experience.css were
       written against. Kept so those files keep working unchanged. Prefer the
       semantic names above in new code; these can be retired once the old
       stylesheets stop referencing them. */
    --primary: var(--navy-800);
    --secondary: var(--ink-400);
    --accent: var(--brass-500);
    --light: var(--grey-100);
    --dark: var(--navy-900);
    --gold: var(--brass-500);
    --gold-500: var(--brass-500);
    --gold-400: var(--brass-300);
    --navy: var(--navy-800);
    --grey-300: var(--grey-200);

    /* ----------------------------------------------------------------------
       Gradients
       ---------------------------------------------------------------------- */
    --gradient-brand: linear-gradient(160deg, var(--navy-700) 0%, var(--navy-800) 58%, var(--navy-900) 100%);

    /* Hero: brass bloom top-right over the navy field. */
    --gradient-brand-hero:
        radial-gradient(120% 130% at 88% -18%, rgba(176, 141, 79, 0.14) 0%, rgba(176, 141, 79, 0) 46%),
        linear-gradient(160deg, var(--navy-700) 0%, var(--navy-800) 58%, var(--navy-900) 100%);

    --gradient-surface: linear-gradient(135deg, var(--white) 0%, var(--grey-100) 100%);
    --gradient-surface-alt: linear-gradient(135deg, var(--grey-100) 0%, var(--white) 100%);

    --gradient-accent: linear-gradient(135deg, var(--garnet-600) 0%, var(--garnet-500) 100%);
    --gradient-accent-hover: linear-gradient(135deg, var(--garnet-500) 0%, var(--garnet-600) 100%);

    --gradient-rule: linear-gradient(90deg, var(--brass-500) 0%, transparent 100%);
    --gradient-timeline: linear-gradient(180deg, var(--brass-500) 0%, var(--navy-800) 100%);

    /* ----------------------------------------------------------------------
       Typography
       --------------------------------------------------------------------
       Newsreader and Public Sans are webfonts and MUST be loaded in
       header.php or they silently fall back to Georgia / system-ui:

         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,500;0,600;1,400&family=Public+Sans:wght@400;600;800&display=swap" rel="stylesheet">

       The fallbacks are deliberately close in metrics, so a missing font
       degrades quietly rather than breaking layout — which also means you
       won't notice it's missing. Check in devtools, not by eye.
       ---------------------------------------------------------------------- */
    --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
    --font-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    /* Serif for display and headings, sans for UI and body. */
    --font-display: var(--font-serif);
    --font-body: var(--font-sans);

    --text-xs: 0.75rem;      /* 12px — eyebrow labels, meta */
    --text-sm: 0.8125rem;    /* 13px — form controls */
    --text-base: 0.90625rem; /* 14.5px — list items */
    --text-md: 0.9375rem;    /* 15px — card body */
    --text-lg: 1.0625rem;    /* 17px */
    --text-xl: 1.375rem;     /* 22px — card headings */
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 2.8rem;

    /* Fluid display sizes — these scale with the viewport, no media query. */
    --text-display: clamp(30px, 4.6vw, 46px);
    --text-lede: clamp(18px, 2.4vw, 23px);

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 800;

    --leading-display: 1.08;
    --leading-tight: 1.4;
    --leading-snug: 1.5;
    --leading-normal: 1.6;
    --leading-card: 1.66;
    --leading-relaxed: 1.7;
    --leading-loose: 1.8;

    --tracking-tight: -0.01em;
    --tracking-wide: 0.04em;
    --tracking-caps: 0.16em;   /* uppercase eyebrow labels */

    /* ----------------------------------------------------------------------
       Spacing — 4px base scale
       ---------------------------------------------------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 26px;
    --space-7: 30px;
    --space-8: 34px;
    --space-9: 40px;
    --space-10: 50px;
    --space-12: 60px;
    --space-14: 70px;
    --space-16: 90px;

    --section-padding-y: var(--space-14);
    --section-padding-y-sm: var(--space-12);
    --container-max: 1200px;
    --container-padding-x: 24px;
    --measure: 900px;   /* max line length for readable prose */

    /* ----------------------------------------------------------------------
       Radius
       The garnet/brass design is squarer than the old navy/gold one —
       6px cards, not 12px. Don't mix the two.
       ---------------------------------------------------------------------- */
    --radius-xs: 3px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-pill: 30px;
    --radius-round: 50%;

    /* ----------------------------------------------------------------------
       Elevation — tinted with the navy, not neutral black.
       ---------------------------------------------------------------------- */
    --shadow-sm: 0 2px 5px rgba(14, 27, 51, 0.06);
    --shadow-card: 0 4px 14px rgba(14, 27, 51, 0.05);
    --shadow-card-hover: 0 16px 34px rgba(14, 27, 51, 0.12);
    --shadow-card-hover-sm: 0 8px 22px rgba(14, 27, 51, 0.1);
    --shadow-accent: 0 4px 14px rgba(125, 31, 43, 0.25);
    --shadow-accent-hover: 0 8px 22px rgba(125, 31, 43, 0.35);
    --shadow-glow: 0 0 34px rgba(176, 141, 79, 0.35);
    --shadow-glow-sm: 0 0 18px rgba(176, 141, 79, 0.4);

    /* ----------------------------------------------------------------------
       Motion
       ---------------------------------------------------------------------- */
    --duration-fast: 0.2s;
    --duration-base: 0.28s;
    --duration-slow: 0.5s;
    --ease: ease;

    --lift-sm: translateY(-3px);
    --lift-md: translateY(-6px);

    /* ----------------------------------------------------------------------
       Layers
       ---------------------------------------------------------------------- */
    --z-base: 1;
    --z-timeline-marker: 2;
    --z-sticky: 100;

    /* ----------------------------------------------------------------------
       Breakpoints (reference only)
       CSS custom properties can't be used inside @media. Documented here;
       the real values live in the media queries.
         mobile:  max-width 768px
       ---------------------------------------------------------------------- */
}