/* ============================================================================
   FOREFITTER — DESIGN TOKENS · the one source of truth for the whole suite

   Loaded by every bay before that bay's own stylesheet:

     hub          fore-fitter/index.html        <link href="/shared/…">
     Shaft Lab    shaftology/index.html         <link href="/shared/…">
     Ball Lab     golf-ball-selector/app/globals.css   @import (bundled copy)
     Coach Lab    pga-coach-finder/app/globals.css     @import (bundled copy)

   The two Next apps @import a *copy* rather than linking `/shared/` so their CSS
   bundle is self-contained and they still render standalone (they run under a
   basePath, so a root-absolute <link> only resolves behind the hub gateway).
   Keep the copies in sync with `node sync-shared.mjs` in fore-fitter/.

   ---------------------------------------------------------------------------
   WHAT LIVES HERE          fonts · color · elevation · radii · motion · the
                            micro-label type scale · focus ring · selection
   WHAT STAYS LOCAL         layout, backgrounds, SVG art, parallax, and every
                            bay-specific component. Each lab keeps its own
                            personality — it just speaks the same vocabulary.
   ---------------------------------------------------------------------------

   CONTRAST BUDGET
   Every ink and accent below is checked against its own theme's `--bg`. The
   suite leans hard on 10–12px uppercase mono micro-labels, so the floor for
   *every* text token is 4.5:1 and the recessive inks sit at ~5:1 rather than
   the ~2.8:1 they used to. Measured ratios are noted per token; if you retune
   a colour, re-check it — the micro-labels are the first thing to break.
   ========================================================================== */

/* ---------------------------------------------------------------- DARK ---- *
   "Carbon" — the anodized instrument bay. Default for the suite.            */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* surfaces */
  --bg:          #0a0d0c;
  --bg-2:        #0d1110;
  --panel:       #121816;
  --panel-2:     #161d1b;
  --panel-3:     #1b231f;

  /* rules — `line` is the volt hairline, `soft`/`hard` are neutral */
  --line:        rgba(216, 255, 62, 0.11);
  --line-soft:   rgba(255, 255, 255, 0.08);
  --line-hard:   rgba(255, 255, 255, 0.16);

  /* Ink ramp. Ratios are quoted against --bg, but the number that actually
     binds is the one against --panel-3, the lightest surface these inks land
     on (spec chips, table heads, scorecard rows). --ink-faint is tuned so even
     THAT clears 4.5:1 — on a raised panel a 5.3:1-on-bg grey measures 4.3:1
     and the 11px micro-labels stop being readable.
                                          vs --bg      vs --panel-3          */
  --ink:         #eaf0ea;                             /* 16.0 : 1   11.0 : 1 */
  --ink-dim:     #a5afa8;                             /*  8.6 : 1    5.9 : 1 */
  --ink-faint:   #878f88;                             /*  5.9 : 1    4.8 : 1 */

  /* Accent ramp. `--x` is the fill and the text colour on a plain surface;
     `--x-deep` is the text colour when the type sits on that accent's OWN
     `--x-soft` tint (a chip, a tag, an active nav pill) — the tint eats about
     1.2:1, which is enough to drop a 5.6:1 accent under the 4.5:1 floor.
     volt — the brand chartreuse. Readable as text AND usable as a fill. */
  --volt:        #d8ff3e;                             /* 17.0 : 1           */
  --volt-deep:   #a9cc1f;                             /* 10.6 : 1           */
  --volt-soft:   rgba(216, 255, 62, 0.14);
  --on-volt:     #0b0f08;

  /* copper — the secondary (Shaft Lab lead, warnings, ratings) */
  --copper:      #edb057;                             /* 10.2 : 1           */
  --copper-deep: #c98a2e;
  --copper-soft: rgba(237, 176, 87, 0.14);
  --on-copper:   #1a1206;

  /* sky — the tertiary (Coach Lab lead, origin pins) */
  --sky:         #7dc7d3;                             /* 10.5 : 1           */
  --sky-deep:    #58aab8;
  --sky-soft:    rgba(125, 199, 211, 0.14);
  --on-sky:      #06181c;

  /* rose — live / alert */
  --rose:        #e8728a;                             /*  6.7 : 1           */
  --rose-deep:   #d4536f;
  --rose-soft:   rgba(232, 114, 138, 0.14);

  /* elevation */
  --shadow:      0 30px 70px -34px rgba(0, 0, 0, 0.85);
  --shadow-sm:   0 12px 28px -18px rgba(0, 0, 0, 0.8);

  /* atmosphere — each bay draws its own art, these set the intensity */
  --grain-op:    0.4;
  --topo-op:     0.5;
  --mon-glow:    rgba(216, 255, 62, 0.18);
  --head-bg:     linear-gradient(180deg, rgba(10, 13, 12, 0.86), rgba(10, 13, 12, 0.5));
  --body-glow:   radial-gradient(1200px 720px at 82% -8%, rgba(216, 255, 62, 0.07), transparent 60%),
                 radial-gradient(900px 620px at -6% 6%, rgba(125, 199, 211, 0.05), transparent 55%),
                 radial-gradient(1100px 800px at 50% 120%, rgba(237, 176, 87, 0.04), transparent 60%);
}

/* --------------------------------------------------------------- LIGHT ---- *
   "Clubhouse" — warm paper. Note the accents are deliberately deeper than
   their dark-theme twins: a #d8ff3e chartreuse on paper measures 1.3:1 and is
   unreadable, so light gets the moss/bronze end of the same hues.           */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:          #f2f3ea;
  --bg-2:        #e9ebde;
  --panel:       #ffffff;
  --panel-2:     #f6f8ee;
  --panel-3:     #eef1e3;

  --line:        rgba(74, 112, 16, 0.22);
  --line-soft:   rgba(20, 30, 12, 0.12);
  --line-hard:   rgba(20, 30, 12, 0.22);

  --ink:         #171c12;                             /* 15.2 : 1           */
  --ink-dim:     #4d5745;                             /*  6.8 : 1           */
  --ink-faint:   #626b59;                             /*  5.0 : 1           */

  --volt:        #4a7010;                             /*  5.6 : 1           */
  --volt-deep:   #35520a;                             /*  8.2 : 1           */
  --volt-soft:   rgba(74, 112, 16, 0.13);
  --on-volt:     #f7f9f0;

  --copper:      #8f5a17;                             /*  5.5 : 1           */
  --copper-deep: #6d430f;
  --copper-soft: rgba(143, 90, 23, 0.13);
  --on-copper:   #f7f9f0;

  --sky:         #256a76;                             /*  5.6 : 1           */
  --sky-deep:    #1a4f58;                             /*  8.0 : 1           */
  --sky-soft:    rgba(37, 106, 118, 0.13);
  --on-sky:      #f7f9f0;

  --rose:        #a83350;                             /*  5.8 : 1           */
  --rose-deep:   #85203a;                             /*  8.3 : 1           */
  --rose-soft:   rgba(168, 51, 80, 0.12);

  --shadow:      0 30px 60px -36px rgba(40, 55, 15, 0.3);
  --shadow-sm:   0 14px 30px -22px rgba(40, 55, 15, 0.32);

  --grain-op:    0.22;
  --topo-op:     0.7;
  --mon-glow:    rgba(74, 112, 16, 0.16);
  --head-bg:     linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(242, 243, 234, 0.55));
  --body-glow:   radial-gradient(1200px 720px at 82% -8%, rgba(74, 112, 16, 0.08), transparent 60%),
                 radial-gradient(900px 620px at -6% 6%, rgba(37, 106, 118, 0.06), transparent 55%),
                 radial-gradient(1100px 800px at 50% 120%, rgba(143, 90, 23, 0.05), transparent 60%);
}

/* ------------------------------------------------- THEME-INDEPENDENT ------ */
:root {
  /* ---- type ----
     Each family is `var(<next/font var>, "<literal name>")`. The static bays
     load the literal from Google Fonts; the Next bays define the first var via
     next/font — which is why both apps put the font className on <html>, not
     <body>: a custom property declared at :root can only substitute other
     custom properties that exist AT :root. When those vars lived on <body>,
     --sans/--serif/--mono resolved to nothing and every page silently fell
     back to Times. Keep the className on <html>. */
  --sans:  var(--font-hanken,   "Hanken Grotesk"), system-ui, -apple-system, sans-serif;
  --serif: var(--font-fraunces, "Fraunces"), Georgia, "Times New Roman", serif;
  --mono:  var(--font-mono,     "JetBrains Mono"), ui-monospace, SFMono-Regular, monospace;

  /* micro-label scale — the suite's signature uppercase mono readouts.
     0.7rem (11.2px) is the FLOOR: below that the wide tracking shreds the
     word shapes. Tracking is capped at 0.2em for the same reason. */
  --fs-micro:   0.7rem;
  --fs-label:   0.76rem;
  --fs-eyebrow: 0.72rem;
  --tr-micro:   0.14em;
  --tr-label:   0.16em;
  --tr-eyebrow: 0.2em;

  --lh-tight: 1.04;
  --lh-body:  1.6;

  /* ---- shape ---- */
  --r:     16px;
  --r-sm:  10px;
  --r-lg:  22px;
  --r-pill: 999px;

  /* ---- layout ---- */
  --maxw:     1200px;
  --maxw-wide: 1440px;
  --gutter:   clamp(16px, 3vw, 36px);

  /* ---- motion ---- */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:  0.18s;
  --dur:       0.28s;
  --dur-slow:  0.7s;

  /* ---- stacking ---- */
  --z-art:  0;    /* grain, topo, parallax, tracers */
  --z-body: 1;
  --z-nav:  200;  /* a bay's own sticky nav */
  --z-bar:  300;  /* the ForeFitter suite bar — always on top of a bay nav */
  --z-pop:  400;  /* overlays, typeaheads, sheets */

  /* ---- compatibility aliases ----
     Shaftology's stylesheet predates the shared palette and speaks "lime".
     Rather than rewrite 700 lines of working CSS, its vocabulary maps onto the
     shared tokens here. New code should use the canonical names above. */
  --lime:          var(--volt);
  --lime-deep:     var(--volt-deep);
  --accent-soft:   var(--volt-soft);
  --on-accent:     var(--on-volt);
  --grain-opacity: var(--grain-op);
}

/* ------------------------------------------------------ BASE BEHAVIOUR ---- */
::selection { background: var(--volt); color: var(--on-volt); }

:focus-visible {
  outline: 2px solid var(--volt);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------ TYPE PRIMITIVES ---
   Shared *typography* only. Bays add their own layout (flex, margins, ticks)
   in their own stylesheet, which loads after this file and therefore wins. */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--volt-deep);
}

.micro {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.mono-inline {
  font-family: var(--mono);
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--volt);
}

.tnum { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ SCROLLBAR --- */
* { scrollbar-color: var(--line-hard) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-hard);
  border-radius: var(--r-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); background-clip: content-box; }

/* --------------------------------------------------------- REDUCED MOTION - */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}