/* tokens.css — Highdive (redesign concept)
 * Emitted from direction.md (archetype E — Full-bleed immersive; concept "The leap is the point").
 * Single source of design values. styles.css consumes ONLY these tokens. */

:root {
  /* ---- Color world: cinematic near-black + bone; ONE accent (campaign flare orange) [decision 8] ---- */
  --color-ink:        #0B0B0C; /* near-black — default cinematic ground */
  --color-ink-2:      #131316; /* raised ink (scene shift, cards on dark) */
  --color-ink-3:      #1C1C21; /* hairline / board-edge on dark */
  --color-ink-4:      #2A2A31; /* stronger hairline on dark */

  --color-bone:       #F5F1E8; /* warm bone — text on ink, and light-theme ground */
  --color-bone-2:     #ECE6D8; /* recessed bone (light-theme alt band) */
  --color-bone-soft:  #B7B2A6; /* muted bone on ink */
  --color-bone-dim:   #7E7A72; /* dimmer bone (captions on ink) */

  --color-flare:      #FF5A1F; /* committed campaign orange — non-text-at-small accents: rail, glyph, numerals, big display, CTA fill */
  --color-flare-2:    #FF7A45; /* lighter flare — hover / large text on ink */
  --color-flare-text: #D8460F; /* flare as SMALL TEXT on bone/light surfaces (AA: 4.7:1 on bone) */
  --color-flare-on-ink:#FF7A45;/* flare as SMALL TEXT on fixed-dark scenes (AA: 5.3:1 on ink) */
  --color-flare-tint: #FF5A1F1F; /* 12% flare wash (chips / rail backing) */
  --color-on-flare:   #0B0B0C; /* ink text on a flare FILL — theme-independent, 8.9:1 */

  --color-focus:      #FF7A45;

  /* Theme-mapped surfaces (default = dark cinematic). Light theme overrides below. */
  --bg:               var(--color-ink);
  --bg-raised:        var(--color-ink-2);
  --surface:          var(--color-ink-2);
  --text:             var(--color-bone);
  --text-soft:        var(--color-bone-soft);
  --text-dim:         var(--color-bone-dim);
  --line:             var(--color-ink-3);
  --line-strong:      var(--color-ink-4);
  --link:             var(--color-flare-on-ink);
  --grain-opacity:    0.05;

  /* ---- Radius (sharp, cinematic — near-square) ---- */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;

  /* ---- Spacing (8px baseline rhythm) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 9rem;
  --space-11: 12rem;

  /* ---- Type [decision 6] ---- */
  --font-display: "Bricolage Grotesque", "Archivo", "Arial Black", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-hero:     clamp(3.5rem, 12vw, 12rem);    /* the kinetic hero headline */
  --fs-scene:    clamp(2.5rem, 8vw, 7rem);      /* full-bleed scene titles */
  --fs-h1:       clamp(2.25rem, 5vw, 4rem);
  --fs-h2:       clamp(1.75rem, 3.6vw, 3rem);
  --fs-h3:       clamp(1.2rem, 2vw, 1.6rem);
  --fs-lead:     clamp(1.15rem, 1.7vw, 1.5rem);
  --fs-body:     1.0625rem;
  --fs-small:    0.9375rem;
  --fs-label:    0.75rem;   /* uppercase tracked labels / scene index */

  --lh-tight: 0.94;   /* monster display */
  --lh-head: 1.04;
  --lh-body: 1.62;
  --tracking-display: -0.02em;
  --tracking-label: 0.16em;

  /* ---- Motion [decisions 2 & 3] ---- */
  --dur-fast: 150ms;
  --dur-mid: 480ms;
  --dur-plunge: 1100ms;
  --dur-stagger: 120ms;   /* hero foot entrance delay */
  --dur-marquee: 42s;     /* client ticker cycle */
  --ease-out: cubic-bezier(.2,.7,.3,1);
  --ease-plunge: cubic-bezier(.6,0,.2,1);

  /* ---- Structure ---- */
  --maxw: 82rem;
  --maxw-narrow: 46rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-pad: clamp(4rem, 9vw, 9rem);
  --section-pad-tight: clamp(2.75rem, 5vw, 4rem);
  --border-hair: 1px solid var(--line);
  --border-strong: 1px solid var(--line-strong);

  /* ---- Texture: film grain (data-URI) + board-edge hairline [decision 5] ---- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");

  /* Elevation: this build is deliberately flat (decision 5 — no glow/float cards); structure comes from borders + grain.
   * One endorsed image-scrim gradient (4C exception b) — darkens the featured still under its overlaid caption. */
  --scrim-feature: linear-gradient(90deg, #0B0B0CE6 0%, #0B0B0C99 42%, #0B0B0C1A 100%);
}

/* ---- Light theme: warm paper, grain dialed down (both themes required) ---- */
:root[data-theme="light"] {
  --bg:          var(--color-bone);
  --bg-raised:   var(--color-bone-2);
  --surface:     #FFFFFF;
  --text:        #16150F;      /* near-black ink on bone */
  --text-soft:   #4B4840;
  --text-dim:    #6E6A60;
  --line:        #DED7C6;
  --line-strong: #C4BBA6;
  --link:        var(--color-flare-text);
  --grain-opacity: 0.03;
}