/* SewerHub design tokens - single source of truth for the app's colors,
   spacing, type, radius, and z-index scales. Loaded FIRST (before base.css)
   so tokens are defined before anything that uses them, rather than the
   previous single :root block living in theme.css (loaded last) which only
   worked because CSS custom properties resolve at paint time, not parse
   time - correct, but misleading to read.

   All color values below are unchanged from, or directly composed from,
   colors already shipped somewhere in this app before this file existed -
   see the inline notes on each new token for where it came from. */
:root{
  /* ---- Existing colors, unchanged ---- */
  --bg:#171b1e;
  --bg-2:#20262a;
  --surface:#283036;
  --surface-2:#30383e;
  --surface-3:#3b454c;
  --border:#465057;
  --text:#f0f2f2;
  --text-muted:#aeb8bd;
  --accent:#d2a94c;
  --accent-soft:rgba(210,169,76,.12);
  --info:#b8d0e6;
  --progress:#d9b56d;
  --notstarted:#889499;
  --danger:#e39378;
  --danger-soft:rgba(227,147,120,.16);

  /* --accent-2 was always identical to --accent (verified: every call site
     used the same #d2a94c value) - kept as an alias so existing rules that
     reference it don't need editing, but it no longer carries its own value. */
  --accent-2:var(--accent);

  /* Text/icon color guaranteed readable on a solid --accent background.
     Replaces 8 separately hand-picked "near-black" hex values that were
     all already within a few percent of --bg (#171b1e) - using --bg
     directly is visually indistinguishable from every one of them. */
  --on-accent:var(--bg);

  /* The one canonical "lighter gold" gradient stop, replacing 3 hand-picked
     hexes (#b89669, #c9a668, #c5a16c) that did the same job slightly
     differently in different files - #c9a668 was already the majority
     choice (3 of 4 sites). */
  --accent-gradient-end:#c9a668;

  /* Already-shipped, previously-untokenized success green: rgba(47,158,68,x)
     was already used for .status-pill.done / .claim-badge.mine / the "add"
     and "reset" activity-log tags - always paired with --done text, which
     used to be identical to --accent (gold text on a green wash). Giving it
     a real token and pointing --done at it (below) fixes both the "done
     looks the same as the brand accent" ambiguity and that gold-on-green
     mismatch, using a color already on screen rather than inventing one. */
  --success:#2f9e44;
  --success-soft:rgba(47,158,68,.16);
  /* --done now uses the success green instead of duplicating the accent
     gold, fixing both the "done looks the same as the brand accent" and
     the gold-text-on-green-wash mismatch (user-confirmed change). */
  --done:var(--success);

  /* "Urgent" priority keeps its own brighter red, distinct from standard
     danger/delete - an intentional two-tier severity distinction, not
     collapsed into one color. */
  --urgent:#ff6b6b;
  --urgent-soft:rgba(255,107,107,.18);

  /* ---- Spacing scale ---- */
  /* Matches the values already dominant across the codebase's hand-picked
     paddings/gaps (4/8/12/16/20/24/32...), so most existing rules map onto
     the nearest step with a barely-perceptible diff. */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:48px;
  --space-10:64px;

  /* ---- Type scale ---- */
  /* Font stack is unchanged (Oswald/Inter/JetBrains Mono) - this is a scale
     for sizes, not a font change. --text-lg (16px) is a hard floor for any
     form input: iOS Safari zooms the viewport on focus for inputs under
     16px, and several existing rules already hardcode 16px for exactly
     that reason - never let an input shrink below it. */
  --text-2xs:10px;
  --text-xs:11px;
  --text-sm:12.5px;
  --text-base:14px;
  --text-lg:16px;
  --text-xl:18px;
  --text-2xl:22px;
  --text-3xl:28px;
  --text-4xl:34px;

  /* ---- Radius scale ---- */
  /* Replaces 13 raw radius values and 3 different "fully round" values
     (999px/100px/99px) that were used interchangeably for the same intent. */
  --radius-xs:4px;
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --radius-full:999px;
  /* Old name kept as an alias - many existing rules reference var(--radius)
     directly and don't need to be touched just to use the new scale. */
  --radius:var(--radius-md);
  --shadow:0 18px 42px #0006;

  /* ---- z-index scale ---- */
  /* Names the stacking values already in use; does not change any
     stacking behavior. */
  --z-dropdown:20;
  --z-bottom-bar:50;
  --z-fab-bar:95;
  --z-sidebar-toggle:98;
  --z-nav-overlay:99;
  --z-sticky-nav:100;
  --z-floating-panel:200;
  --z-modal-backdrop:1000;
  --z-modal-elevated:1050;
  --z-modal-critical:5000;
  --z-app-gate:9999;
}