/* Design tokens — the single source for colour, type, space, grid, shape and motion.
   Page and component CSS only use these variables; no one-off values. */

:root {
  /* ---------- Colour: neutral shell ---------- */
  --c-page: #FAFAF9;          /* almost white */
  --c-surface: #FFFFFF;       /* cards, panels */
  --c-sunk: #EFEFEC;          /* image placeholders, sunken panels */
  --c-ink: #141414;           /* text — 17.6:1 on page */
  --c-ink-2: #5C5A56;         /* secondary text — 6.6:1 */
  --c-ink-3: #615E59;         /* tertiary / meta — 6.2:1 */
  --c-line: #E4E4E0;          /* hairlines */
  --c-line-strong: #141414;

  /* Primary — one simple dark colour for buttons, active states, links */
  --c-primary: #141414;
  --c-primary-hover: #2E2E2E;
  --c-on-primary: #FFFFFF;
  --c-focus: var(--c-primary);

  /* Secondary — a quiet light grey for secondary buttons, filters, tags and hover fills.
     The colourful accent comes from each case study's own brand colour, not from the shell. */
  --c-secondary: #ECECE8;     /* ink on it: 16:1 */
  --c-secondary-hover: #E2E2DD;
  --c-on-secondary: var(--c-ink);

  /* Olive backdrop for the menu and the numbers band (Evgenia's swatch). Ink on it: 8.6:1. */
  --c-backdrop: #AFB3AA;
  /* heat ramp (Home statement): faint → strong, deep blue → teal → green → warm yellow */
  --heat-1: #1D3A4A;
  --heat-2: #2C6E63;
  --heat-3: #7A9A3E;
  --heat-4: #D4B95A;

  /* ---------- Colour: one per case study (from each brand) ----------
     A case-study page sets --p-bg / --p-fg / --p-accent via [data-project]. */
  --p-bg: var(--c-ink);
  --p-fg: #F3EFE7;
  --p-accent: var(--c-page);

  /* ---------- Type ---------- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Funnel Display", var(--font-sans);  /* headings — chosen in stage 3 */
  --w-display: 650;
  --w-display-lite: 300;                               /* the lighter half of a heading */
  --tr-display: -0.035em;
  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;   /* used in italic only */
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid scale (mobile → desktop), ~1.25 ratio */
  --t-display: clamp(3rem, 1.6rem + 7vw, 8.5rem);     /* name / hero word */
  --t-h1: clamp(2.25rem, 1.5rem + 3.6vw, 4.75rem);    /* page & case titles */
  --t-h2: clamp(1.75rem, 1.3rem + 2.2vw, 3.25rem);    /* statements, section titles */
  --t-h3: clamp(1.375rem, 1.15rem + 1vw, 2rem);
  --t-lead: clamp(1.125rem, 1.04rem + 0.45vw, 1.375rem);
  --t-body: 1.0625rem;                                 /* 17px */
  --t-small: 0.9375rem;                                /* 15px */
  --t-label: 0.75rem;                                  /* 12px mono labels */

  --lh-tight: 1.02;
  --lh-snug: 1.15;
  --lh-body: 1.55;
  --tr-tight: -0.035em;       /* display / h1 */
  --tr-snug: -0.02em;         /* h2 / h3 */
  --tr-label: 0.06em;         /* mono caps labels */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;

  --measure: 62ch;            /* comfortable reading width */

  /* ---------- Space (4px base) ---------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;
  --section: clamp(4.5rem, 3rem + 7vw, 10rem);         /* space between sections */

  /* ---------- Grid ---------- */
  --grid-cols: 12;
  --gutter: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);     /* 12 → 20px */
  --margin: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);       /* 16 → 40px */
  --max: 1680px;

  /* ---------- Shape ---------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-media: 0;               /* images and video — square corners (device frames keep their own) */
  --r-pill: 999px;
  --hairline: 1px solid var(--c-line);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);           /* expo-out: fast start, long soft landing */
  --ease-in-out: cubic-bezier(0.87, 0, 0.13, 1);       /* strong in-out for wipes / transitions */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --d-fast: 200ms;
  --d-base: 400ms;
  --d-slow: 800ms;
  --d-reveal: 1100ms;
  --d-hover-widen: 1400ms;
  --stagger: 70ms;
  --reveal-shift: 24px;       /* how far things rise when they appear */
  --word-dim: 0.16;           /* opacity of a not-yet-read statement word */
}

/* Case-study colours — taken from each project's own brand */
[data-project="away-ai"],
[data-project="away-ai-design-system"] { --p-bg: #1B1818; --p-fg: #F3EFE7; --p-accent: #3B9188; }
[data-project="experiencegift-portal"],
[data-project="experiencegift-design-system"] { --p-bg: #781D29; --p-fg: #F3EFE7; --p-accent: #3F090E; }
[data-project="travelgift"] { --p-bg: #71604D; --p-fg: #F3EFE7; --p-accent: #DCCDB7; }
[data-project="heineken-reordering"],
[data-project="heineken-eu-guidelines"] { --p-bg: #00424C; --p-fg: #F3EFE7; --p-accent: #CEFAB7; }

/* Primary colour options — ink chosen in stage 3 (= :root default); the rest stay only for the style page's Try panel */
[data-primary="ink"]       { --c-primary: #141414; --c-primary-hover: #2E2E2E; }
[data-primary="navy"]      { --c-primary: #1A2333; --c-primary-hover: #2A3650; }
[data-primary="forest"]    { --c-primary: #1F3A2E; --c-primary-hover: #2D5241; }
[data-primary="aubergine"] { --c-primary: #3A1F33; --c-primary-hover: #55304B; }
[data-primary="cocoa"]     { --c-primary: #3B2A22; --c-primary-hover: #553E33; }

/* Heading options — funnel chosen in stage 3 (= :root default); the rest stay only for the style page's Try panel */
[data-heading="geist"]   { --font-display: "Geist", var(--font-sans); --w-display: 500; --w-display-lite: 300; --tr-display: -0.05em; }
[data-heading="funnel"]  { --font-display: "Funnel Display", var(--font-sans); --w-display: 650; --w-display-lite: 300; --tr-display: -0.035em; }
[data-heading="bricolage"] { --font-display: "Bricolage Grotesque", var(--font-sans); --w-display: 600; --w-display-lite: 300; --tr-display: -0.045em; }

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 0ms; --d-base: 0ms; --d-slow: 0ms; --d-reveal: 0ms; --d-hover-widen: 0ms;
    --stagger: 0ms; --reveal-shift: 0px; --word-dim: 1;
  }
}