/* ==========================================================================
   STEALIX — design tokens

   The single source of truth for colour, type, spacing, radius, border,
   shadow and motion across BOTH the public site and the admin panel. Nothing
   here describes a component; nothing outside this file declares a literal
   colour or size.

   Load order on every page:
     shared/stealix-tokens.css   <- this file
     shared/stealix-base.css     shared reset + shared components
     site/site.css | admin/admin.css   surface-specific layout

   Public pages are light-first: the light values below ARE the design, and a
   dark block (the ink cards, the admin sidebar) is an accent, not a theme.
   There is deliberately no dark-mode override yet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Font
   Space Grotesk is not bundled yet. Drop the woff2 files into
   static/shared/fonts/ and un-comment the @font-face blocks; the fallback
   stack below keeps the layout identical in the meantime.
   No external CDN is referenced by design.
   --------------------------------------------------------------------------
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-400.woff2") format("woff2");
  font-weight: 400; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-500.woff2") format("woff2");
  font-weight: 500; font-display: swap; font-style: normal;
}
*/

:root {
  /* --- core palette (approved, do not alter) --------------------------- */
  --lime:            #B9FF66;
  --ink:             #191A23;
  --surface-2:       #F3F3F3;
  --surface-1:       #FFFFFF;

  /* --- derived neutrals ------------------------------------------------ */
  --ink-60:          #5A5C6B;   /* secondary text                        */
  --ink-40:          #6B6D7B;   /* meta, placeholder, disabled (AA on both surfaces) */
  --line:            var(--ink);/* structural border — full ink          */
  --line-soft:       #E4E4E8;   /* internal dividers, table rows         */
  --canvas:          var(--surface-2);
  --row-hover:       #FAFAFA;
  --row-selected:    #F9FFEF;
  --lime-ring:       rgba(185, 255, 102, .45);
  --on-ink:          rgba(255, 255, 255, .78);
  --on-ink-dim:      rgba(255, 255, 255, .55);
  --on-ink-hover:    rgba(255, 255, 255, .08);
  --overlay:         rgba(25, 26, 35, .55);

  /* --- status ---------------------------------------------------------- */
  --ok-bg:           #EAFFD1;
  --ok-fg:           #2E5B00;
  --warn-bg:         #FFF4D1;
  --warn-fg:         #6B4E00;
  --danger-bg:       #FFE4DF;
  --danger-fg:       #7A1F10;
  --info-bg:         var(--surface-2);
  --info-fg:         var(--ink);
  --warn-fill:       #C79400;   /* quota bar fill at 80-94%               */
  --warn-on-ink:     #FFC94D;   /* status text/dot on a dark strip        */
  --danger-on-ink:   #FF7A63;   /* status text/dot on a dark strip        */

  /* --- typography ------------------------------------------------------ */
  --font-sans: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Consolas", monospace;

  --fs-h1:      36px;  --lh-h1:      42px;
  --fs-h2:      24px;  --lh-h2:      30px;
  --fs-h3:      18px;  --lh-h3:      24px;
  --fs-body:    14px;  --lh-body:    20px;
  --fs-small:   12px;  --lh-small:   16px;
  --fs-label:   12px;  --lh-label:   16px;
  --fs-kpi:     44px;  --lh-kpi:     48px;
  --fs-mono:    13px;  --lh-mono:    18px;

  --fw-regular: 400;
  --fw-medium:  500;
  --ls-label:   .04em;

  /* --- spacing (4px base) ---------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-6:  24px;
  --s-8:  32px;
  --s-12: 48px;
  --s-16: 64px;

  /* --- radius ---------------------------------------------------------- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* --- borders --------------------------------------------------------- */
  --bw:        1px;
  --bw-strong: 2px;
  --border:        var(--bw) solid var(--line);
  --border-soft:   var(--bw) solid var(--line-soft);

  /* --- shadows --------------------------------------------------------- */
  --shadow-hard: 0 4px 0 0 var(--ink);          /* CTA + hero only        */
  --shadow-pop:  0 8px 24px rgba(25, 26, 35, .12);
  --focus-ring:  0 0 0 4px var(--lime-ring);

  /* --- layout ---------------------------------------------------------- */
  --tap-min:             44px;

  /* --- motion ---------------------------------------------------------- */
  --t-fast: 120ms ease;
  --t-base: 180ms ease;
}

/* breakpoints (documented; media queries use these literals)
   xl 1440 · lg 1280 · md 1024 · sm 768 */