/* tokens.css — 1986 Studios (redesign concept; companion to Highdive)
 * Emitted from direction.md (archetype B — Gallery-first; concept "Where the leap gets made").
 * Sibling to ../highdive: shared cinematic dark base + shared type; own accent = mint.
 * styles.css consumes ONLY these tokens. */

:root {
  /* ---- Color world: cinematic near-black + bone; ONE accent (mint) [decision 8] ---- */
  --color-ink:        #0B0B0D; /* near-black — default cinematic ground (a hair cooler than Highdive) */
  --color-ink-2:      #131418; /* raised ink (scene shift, cards on dark) */
  --color-ink-3:      #1D1E24; /* hairline / crop-mark on dark */
  --color-ink-4:      #2B2C34; /* stronger hairline on dark */

  --color-bone:       #F4F1EA; /* warm bone — text on ink, and light-theme ground */
  --color-bone-2:     #ECE7DB; /* recessed bone (light-theme alt band) */
  --color-bone-soft:  #B4B1A9; /* muted bone on ink */
  --color-bone-dim:   #7C7A75; /* dimmer bone (captions on ink) */

  --color-mint:       #2FE3A6; /* committed mint (their brand) — non-text-at-small accents: crop marks, ring, numerals, CTA fill, big display */
  --color-mint-2:     #58ECBC; /* lighter mint — hover / large text on ink */
  --color-mint-text:  #0E8F63; /* mint as SMALL TEXT on bone/light (AA: ~4.6:1 on bone) */
  --color-mint-on-ink:#4FE9B4; /* mint as SMALL TEXT on fixed-dark scenes (AA: ~9:1 on ink) */
  --color-mint-tint:  #2FE3A61F; /* 12% mint wash (chips / mark backing) */
  --color-on-mint:    #06231A; /* deep-ink text on a mint FILL — theme-independent, high contrast */
  --color-on-mint-2:  #041a13; /* darker on-mint (button hover) */

  --color-focus:      #58ECBC;

  /* 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-mint-on-ink);
  --grain-opacity:    0.05;

  /* ---- Radius (sharp, edit-suite) ---- */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;

  /* ---- Spacing (8px baseline) ---- */
  --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 (shared with Highdive — sibling) [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(3rem, 9vw, 8.5rem);
  --fs-scene:    clamp(2.25rem, 6vw, 5rem);
  --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;

  --lh-tight: 0.95;
  --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-lock: 700ms;
  --dur-stagger: 120ms;
  --dur-marquee: 40s;
  --ease-out: cubic-bezier(.2,.7,.3,1);
  --ease-lock: cubic-bezier(.6,0,.2,1);

  /* ---- Structure ---- */
  --maxw: 84rem;
  --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) [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");
}

/* ---- 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:        #14140F;
  --text-soft:   #4A4840;
  --text-dim:    #6C6A60;
  --line:        #DED8C8;
  --line-strong: #C3BBA8;
  --link:        var(--color-mint-text);
  --grain-opacity: 0.03;
}