/* ============================================================================
   tokens.css — Apex Dash Royal Sports
   Every value traces to DESIGN.md. No new hues are introduced anywhere.
   Hue families: Active Ember, Midnight Field, Alert Crimson, Cool Mist neutrals.

   The `--apex-*` names are mirrored by Tailwind's `@theme` bridge in each page's
   <style type="text/tailwindcss"> block, so utilities and custom classes cannot
   drift apart. See PLAN.md §12.2.
   ========================================================================== */

:root {
  /* --- DESIGN.md colors, verbatim ------------------------------------- */

  /* Active Ember — the only energy color. One Voice Rule: keep it rare.

     Anchored to the supplied brand asset (assets/img/logo-royal-sports.png),
     which is a flat #F27231. The three companion steps keep the same hue (20deg)
     and saturation (88%) and the same lightness ladder the previous family used,
     so only the base colour moved.

     Role split, because two of these are read as TEXT on light surfaces:
       ember        fills, borders, focus rings, caret, the ember dot
       ember-bright overlays on Midnight Field (active nav icon, noscript link)
       ember-deep   hover FILLS and borders
       ember-dark   hover TEXT on light surfaces — dark enough to clear 4.5:1,
                    which ember-deep is not (it measures 2.81:1) */
  --apex-ember: #f27231;
  --apex-ember-bright: #f59768;
  --apex-ember-deep: #e6570f;
  --apex-ember-dark: #c4440b;

  /* Midnight Field — the structural color. The ladder runs deep -> mid -> soft
     -> bright, and the saturation steps DOWN as the lightness rises (75% at
     #081c38, 69% at #0d2647, 62% at #143354, 55% at #20426f) while the hue holds
     at 211-215deg. bright is the top of the entry surface's sky gradient: near
     enough to the family to read as the same colour lit, far enough from the
     base to be a gradient at all. */
  --apex-field: #081c38;
  --apex-field-mid: #0d2647;
  --apex-field-soft: #143354;
  --apex-field-bright: #20426f;

  /* Alert Crimson — status only, never decorative. */
  --apex-crimson: #e02424;

  /* Neutral field and lines. */
  --apex-mist: #f2f5f9;
  --apex-line: #e2e8f0;
  --apex-white: #ffffff;

  /* Slate text roles. */
  --apex-ink: #334155;
  --apex-muted: #64748b;
  --apex-muted-deep: #475569;

  /* Semantic error. */
  --apex-error-border: #f87171;
  --apex-error-text: #dc2626;

  /* --- Derived: alpha and overlay only. Never a new hue. -------------- */

  --apex-line-70: rgb(226 232 240 / 0.7);
  --apex-on-field: rgb(255 255 255 / 0.86);
  --apex-on-field-muted: rgb(255 255 255 / 0.62);
  --apex-on-field-hairline: rgb(255 255 255 / 0.14);
  --apex-ember-tint: rgb(242 114 49 / 0.1);
  --apex-ember-ring: rgb(242 114 49 / 0.25);
  --apex-ember-scrim: rgb(242 114 49 / 0.06);
  /* The bloom behind the extruded mark on the entry surface. It is a *veil*
     because it sits over the field and under the object, so its job is to lift
     the navy around the silhouette rather than to tint anything the user reads.
     Low enough that no pixel of it counts as ember in the One Voice measurement
     (at 0.2 over the field it composites to roughly rgb(55 45 55), which is at
     neither hue's window). */
  --apex-ember-veil: rgb(242 114 49 / 0.2);
  --apex-field-scrim: rgb(8 28 56 / 0.55);
  /* --apex-field-soft as a translucent wash, for the entry surface's key-light
     hotspot. It has to be an alpha of the *soft* step rather than the opaque
     token, because the hotspot now sits OVER the sky gradient: an opaque stop
     would hide the gradient everywhere outside its radius, which is what the
     lift used to do when the field was flat. */
  --apex-field-veil: rgb(20 51 84 / 0.55);
  /* The error focus ring. Same hue as --apex-error-border, which DESIGN.md
     already owns as a semantic colour — an alpha of it, not a new hue, exactly
     like the ember ring above. app.css's global ember ring would otherwise
     paint an invalid field orange, which reads as an invitation to act. */
  --apex-error-ring: rgb(248 113 113 / 0.3);

  /* --- Type: two faces, fixed rem scale (never clamp) ----------------- */
  /* operate.md forbids fluid headings in product UI; see PLAN.md deviation 6.

     Split face. Archivo carries every functional role — body, table cells,
     labels, controls, chart text. Montserrat is the voice face only now: page
     title, KPI figure, section headings, brand lockup.

     Why: Montserrat's wide geometric lowercase cost real column width at the
     13–14px sizes this console actually reads at, inside a fixed nine-column
     grid. Archivo is a grotesque drawn for small sizes and tight measures, with
     a taller x-height and real tabular figures, so the same text occupies less
     width and stays legible. See PLAN.md deviation 12. */

  --apex-font: "Archivo", system-ui, sans-serif;
  /* The display chain falls back to the WORK face, not straight to system-ui.
     If Montserrat fails to load — offline, CDN blocked, or opened from disk —
     headings then degrade into the same family as everything else instead of
     introducing a third face at exactly the moment the system is under strain. */
  --apex-font-display: "Montserrat", "Archivo", system-ui, sans-serif;
  --apex-fs-metric: 1.375rem;
  --apex-fs-headline: 1.125rem;
  --apex-fs-subhead: 1rem;
  --apex-fs-body: 0.875rem;
  --apex-fs-small: 0.8125rem;
  --apex-fs-label: 0.6875rem;
  /* Micro-labels — nav group, sidebar note, topbar subtitle, brand mark.
     Held at 11px: below 11px text stops being legible on small and high-DPI
     viewports, and no text in this console renders smaller than this. DESIGN.md's
     10px micro-label step belongs to the catalogue's decorative "start from"
     pills and is not used here. */
  --apex-fs-micro: 11px;

  --apex-ls-label: 0.08em;
  --apex-ls-micro: 0.18em;

  /* --- Radius — one family, DESIGN.md verbatim ------------------------ */

  --apex-r-pill: 9999px;
  --apex-r-card: 16px;
  --apex-r-popover: 12px;
  --apex-r-inset: 10px;

  /* --- Space — 8px base grid ------------------------------------------ */

  --apex-s1: 4px;
  --apex-s2: 8px;
  --apex-s3: 12px;
  --apex-s4: 16px;
  --apex-s5: 24px;
  --apex-s6: 32px;

  /* --- Elevation — DESIGN.md shadow vocabulary, verbatim -------------- */
  /* Flat by default. Shadows answer to state, never to rest. */

  --apex-sh-ambient: 0 14px 40px -18px rgb(7 26 51 / 0.25);
  --apex-sh-lift: 0 26px 50px -22px rgb(7 26 51 / 0.4);
  --apex-sh-glow: 0 8px 20px -8px rgb(242 114 49 / 0.65);
  --apex-sh-header: 0 10px 15px -3px rgb(8 28 56 / 0.2);
  --apex-sh-sheet: 0 -18px 40px -24px rgb(8 28 56 / 0.45);

  /* --- Layout --------------------------------------------------------- */

  --apex-sidebar: 264px;
  --apex-topbar: 64px;
  --apex-content: 1440px;
  --apex-thead: 48px;
  /* The accessibility floor for any hit target, per AGENTS.md. Every control
     references this rather than declaring its own height. */
  --apex-tap: 44px;
  /* topbar + table head — the scroll-margin that keeps sticky chrome off a
     focused row. See PLAN.md amendment A8. */
  --apex-sticky-offset: 112px;

  /* Light theme only, locked. Prevents native selects and scrollbars from
     rendering dark when the OS prefers dark. See PLAN.md amendment A7. */
  color-scheme: light;
}