/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — single source of truth for colour
   ═══════════════════════════════════════════════════════════════════════════

   Loaded FIRST, before every other stylesheet. modern-ui.css and
   compup-style.css previously each declared their own :root colour palette
   (both verbatim Tailwind defaults, purple primary) and `--primary` was defined
   twice with conflicting values — #2c3e50 in style.css and #7c3aed in
   compup-style.css — so which one applied depended on load order. Colour now
   lives here and only here; those files keep their spacing/type/shadow scales.

   Palette: deep navy primary, warm neutral ground, green reserved strictly for
   money. Two decisions worth preserving:

   1. **Green means money, nothing else.** Savings figures are the only
      saturated element on a page. Don't reach for --money-* for a generic
      success toast — use --state-ok.
   2. **Warm neutrals, not slate.** The ground tone carries over from the
      landing page's #fffaf7, so the editorial hero and the app behind it read
      as one product rather than two.

   The legacy token names (--primary-500, --purple-700, --gray-900, …) are kept
   as aliases so ~4,000 lines of existing CSS keep working. New work should use
   the semantic names at the bottom of this file.
═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Navy — brand primary ─────────────────────────────────────────────── */
  --navy-50:  #f4f7fa;
  --navy-100: #e5edf5;
  --navy-200: #c7d8e8;
  --navy-300: #9fbad3;
  --navy-400: #6b93b6;
  --navy-500: #426f97;
  --navy-600: #2a5279;
  --navy-700: #1c3d5a;   /* brand navy — buttons, links, headings */
  --navy-800: #142c42;
  --navy-900: #0c1d2c;

  /* ── Warm neutrals — surfaces and text ────────────────────────────────── */
  --warm-50:  #fdfaf7;   /* page ground, matches the landing hero */
  --warm-100: #f5f0ea;
  --warm-200: #e9e2d9;   /* hairline borders */
  --warm-300: #d5cdc2;
  --warm-400: #aaa398;   /* decorative / disabled only — fails AA as text */
  /* Muted text. Darkened from #837c71, which measured 4.13:1 on white and
     3.97:1 on the warm ground — under AA for normal text, and this token backs
     --text-muted, table headers and small labels. 4.81:1 / 4.62:1 now, so it
     passes on both surfaces it actually appears on. */
  --warm-500: #797166;
  --warm-600: #5f5850;
  --warm-700: #45403a;
  --warm-800: #2c2823;
  --warm-900: #1a1714;   /* ink — primary text */

  /* ── Money green — savings figures ONLY ───────────────────────────────── */
  --money-50:  #eef7f2;
  --money-100: #d5eae0;
  --money-200: #a9d5c1;
  --money-500: #12855a;
  --money-600: #0e6b48;
  --money-700: #0a5337;

  /* ── Amber — deadlines, attention ─────────────────────────────────────── */
  --amber-50:  #fdf6ec;
  --amber-100: #f9e8cc;
  --amber-500: #b07818;
  --amber-600: #8f5f12;

  /* ── Red — errors, destructive ────────────────────────────────────────── */
  --red-50:  #fdf2f1;
  --red-100: #f8dcd9;
  --red-500: #b23a30;
  --red-600: #932c24;

  /* ══ Semantic layer — prefer these in new work ═════════════════════════ */
  --surface:            var(--warm-50);
  --surface-raised:     #ffffff;
  --surface-sunken:     var(--warm-100);
  --border-hairline:    var(--warm-200);
  --border-strong:      var(--warm-300);

  --text-strong:        var(--warm-900);
  --text-body:          var(--warm-700);
  --text-muted:         var(--warm-500);
  --text-on-dark:       var(--warm-50);

  --brand:              var(--navy-700);
  --brand-hover:        var(--navy-800);
  --brand-subtle:       var(--navy-50);
  --brand-ring:         rgba(28, 61, 90, 0.28);

  --money:              var(--money-600);
  --money-subtle:       var(--money-50);

  --state-ok:           var(--money-600);
  --state-warn:         var(--amber-500);
  --state-error:        var(--red-500);

  /* ══ Legacy aliases — DO NOT use in new work ═══════════════════════════
     Kept so existing rules in modern-ui.css, compup-style.css, protest
     templates and the report modal keep resolving. Retire these as surfaces
     get re-skinned onto the semantic layer above. */

  /* was: purple ramp (modern-ui.css) */
  --primary-50:  var(--navy-50);
  --primary-100: var(--navy-100);
  --primary-200: var(--navy-200);
  --primary-300: var(--navy-300);
  --primary-400: var(--navy-400);
  --primary-500: var(--navy-600);   /* was #a855f7 — mid-ramp reads as brand */
  --primary-600: var(--navy-700);
  --primary-700: var(--navy-700);
  --primary-800: var(--navy-800);
  --primary-900: var(--navy-900);

  /* was: purple ramp under a second name (compup-style.css) */
  --purple-50:  var(--navy-50);
  --purple-100: var(--navy-100);
  --purple-200: var(--navy-200);
  --purple-300: var(--navy-300);
  --purple-400: var(--navy-400);
  --purple-500: var(--navy-500);
  --purple-600: var(--navy-600);
  --purple-700: var(--navy-700);
  --purple-800: var(--navy-800);
  --purple-900: var(--navy-900);

  /* was: #7c3aed / #2c3e50 depending on load order */
  --primary:       var(--navy-700);
  --primary-light: var(--navy-500);
  --primary-dark:  var(--navy-800);
  --primary-glow:  var(--brand-ring);

  /* was: sky-blue ramp; now a muted navy tint so it can't fight the brand */
  --secondary-50:  var(--navy-50);
  --secondary-100: var(--navy-100);
  --secondary-200: var(--navy-200);
  --secondary-300: var(--navy-300);
  --secondary-400: var(--navy-400);
  --secondary-500: var(--navy-500);
  --secondary-600: var(--navy-600);
  --secondary-700: var(--navy-700);
  --secondary-800: var(--navy-800);
  --secondary-900: var(--navy-900);
  --secondary:     var(--navy-500);

  /* was: #22c55e bright green */
  --success-50:  var(--money-50);
  --success-100: var(--money-100);
  --success-200: var(--money-200);
  --success-300: var(--money-200);
  --success-400: var(--money-500);
  --success-500: var(--money-500);
  --success-600: var(--money-600);
  --success-700: var(--money-700);
  --success-800: var(--money-700);
  --success-900: var(--money-700);
  --success:       var(--money-600);
  --success-light: var(--money-500);
  --success-dark:  var(--money-700);
  --success-bg:    var(--money-50);

  --warning-50:  var(--amber-50);
  --warning-100: var(--amber-100);
  --warning-200: var(--amber-100);
  --warning-300: var(--amber-500);
  --warning-400: var(--amber-500);
  --warning-500: var(--amber-500);
  --warning-600: var(--amber-600);
  --warning-700: var(--amber-600);
  --warning-800: var(--amber-600);
  --warning-900: var(--amber-600);
  --warning:     var(--amber-500);

  --error-50:  var(--red-50);
  --error-100: var(--red-100);
  --error-200: var(--red-100);
  --error-300: var(--red-500);
  --error-400: var(--red-500);
  --error-500: var(--red-500);
  --error-600: var(--red-600);
  --error-700: var(--red-600);
  --error-800: var(--red-600);
  --error-900: var(--red-600);
  --alert:       var(--red-500);
  --alert-light: var(--red-500);
  --alert-dark:  var(--red-600);
  --alert-bg:    var(--red-50);

  /* --danger-* and --green-* were referenced by modern-ui.css but never
     defined in any stylesheet — the rules at modern-ui.css:1259 had no
     fallback, so that badge rendered with a transparent background and
     invisible text. Defined here rather than left broken. */
  --danger-100: var(--red-100);
  --danger-200: var(--red-100);
  --danger-500: var(--red-500);
  --danger-600: var(--red-600);
  --green-700:  var(--money-700);

  /* was: cool Tailwind grays; now warm so surfaces match the landing */
  --gray-50:  var(--warm-50);
  --gray-100: var(--warm-100);
  --gray-200: var(--warm-200);
  --gray-300: var(--warm-300);
  --gray-400: var(--warm-400);
  --gray-500: var(--warm-500);
  --gray-600: var(--warm-600);
  --gray-700: var(--warm-700);
  --gray-800: var(--warm-800);
  --gray-900: var(--warm-900);

  /* dashboard sidebar — already navy, deepened to match the brand ramp */
  --sidebar-bg:    var(--navy-900);
  --sidebar-hover: var(--navy-800);
  --sidebar-text:  var(--navy-200);

  /* Shadows — warm-tinted rather than neutral black, so cards sit on the
     warm ground instead of looking cut out of it. */
  --shadow-sm: 0 1px 2px 0 rgba(26, 23, 20, 0.05);
  --shadow-md: 0 4px 10px -2px rgba(26, 23, 20, 0.08);
  --shadow-lg: 0 12px 24px -6px rgba(26, 23, 20, 0.10);
  --shadow-xl: 0 24px 40px -12px rgba(26, 23, 20, 0.13);
  --shadow-purple: 0 10px 30px -6px var(--brand-ring);   /* legacy name */

  /* ── Breakpoints — reference only, NOT usable inside @media conditions ──
     CSS custom properties cannot appear in a media-feature value in any
     browser (`@media (max-width: var(--bp-md))` silently fails the whole
     query rather than erroring), so these exist purely as the documented
     scale to copy the literal px value from. Two tiers:
       --bp-sm (480px) and --bp-md (640px) are the system's actual generic
       collapse points — 640 matches DESIGN.md's documented "single column
       under ~640px" rule and is what report/main_report.html already uses.
     Anything narrower than a generic tier (450, 560, 720 elsewhere in this
     codebase) is a content-driven exception with its own inline comment
     explaining the specific overflow it fixes — those are intentional and
     must not be forced onto this scale. */
  --bp-sm: 480px;
  --bp-md: 640px;
  --bp-lg: 768px;
  --bp-xl: 1024px;
}