/* ============================================================
   MABWE — DESIGN TOKENS
   ------------------------------------------------------------
   This file is the ONLY part of the prototype's CSS intended to
   survive into the real build. Component styles live in app.css
   and are disposable; everything here is the contract.

   Palette: granite and gold.
   "Mabwe" is Shona for stones — Zimbabwe is dzimba dza mabwe,
   houses of stone. Neutrals are cut from granite (cool, faintly
   green); the single accent is a deep, desaturated gold that
   echoes the country's other export and reads as "act here".

   Rules:
   - ONE accent. Gold means action or attention, nothing else.
   - Semantic colours (good/warn/bad) are separate from the accent
     and are never used decoratively.
   - Money is always tabular. Always.
   ============================================================ */

:root {
  /* ── Granite neutrals ─────────────────────────────────── */
  --stone-000: #FFFFFF;
  --stone-025: #F7F8F6;   /* app background */
  --stone-050: #F0F2EF;   /* sunken panels, table stripes */
  --stone-100: #E5E8E4;   /* borders, dividers */
  --stone-200: #D2D7D1;   /* strong borders, disabled fills */
  --stone-300: #B0B8AF;   /* placeholder text */
  --stone-400: #8A948A;   /* muted text */
  --stone-500: #67716A;   /* secondary text */
  --stone-600: #4A544D;   /* body text */
  --stone-700: #333C36;   /* headings */
  --stone-800: #212824;   /* app bar, high contrast surfaces */
  --stone-900: #141A17;   /* deepest ink */

  /* ── The one accent ───────────────────────────────────── */
  --gold-050: #FBF4E2;
  --gold-100: #F4E6C2;
  --gold-300: #D9B457;
  --gold-500: #9A6E12;    /* primary accent — actions, focus, active nav */
  --gold-600: #7E5A0D;    /* accent hover */
  --gold-700: #5E430A;    /* accent pressed, accent text on light */

  /* ── Semantic — never decorative ──────────────────────── */
  --good-050: #E8F3EC;
  --good-500: #1F6B45;
  --good-700: #14492F;

  --warn-050: #FDF2DF;
  --warn-500: #96650A;
  --warn-700: #6B4805;

  --bad-050:  #FBEAE7;
  --bad-500:  #A63A26;
  --bad-700:  #78291B;

  --info-050: #E8F0F3;
  --info-500: #2A6478;
  --info-700: #1C4655;

  /* ── Semantic aliases ─────────────────────────────────── */
  --bg:            var(--stone-025);
  --bg-sunken:     var(--stone-050);
  --surface:       var(--stone-000);
  --surface-alt:   var(--stone-050);
  --border:        var(--stone-100);
  --border-strong: var(--stone-200);

  --text:          var(--stone-700);
  --text-body:     var(--stone-600);
  --text-muted:    var(--stone-500);
  --text-faint:    var(--stone-400);
  --text-invert:   var(--stone-025);

  --accent:        var(--gold-500);
  --accent-hover:  var(--gold-600);
  --accent-text:   var(--gold-700);
  --accent-wash:   var(--gold-050);
  --accent-line:   var(--gold-100);

  --focus-ring:    var(--gold-500);

  /* Chrome — surfaces that stay dark in BOTH themes: the app bar,
     hero stat tiles, summary headers. These must NOT borrow a step
     from the stone ramp, because the ramp inverts in dark mode and
     would turn every one of them white-on-white. */
  --chrome:       #212824;
  --chrome-deep:  #141A17;
  --chrome-text:  #FFFFFF;
  --chrome-muted: #8A948A;
  --chrome-line:  #333C36;

  /* ── Type ─────────────────────────────────────────────── */
  --ff-sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --ff-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-display: 30px;
  --fs-h1:      23px;
  --fs-h2:      18px;
  --fs-h3:      15.5px;
  --fs-body:    14.5px;
  --fs-sm:      13.2px;
  --fs-xs:      12.2px;
  --fs-label:   10.8px;   /* uppercase, letterspaced */

  --lh-tight: 1.2;
  --lh-snug:  1.4;
  --lh-body:  1.58;

  --ls-label: 0.09em;
  --ls-tight: -0.011em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* ── Space — 4px base ─────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ── Radius — restrained. This is a ledger, not a toy. ── */
  --r-sm:   3px;
  --r-md:   5px;
  --r-lg:   8px;
  --r-pill: 999px;

  /* ── Elevation ────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(20, 26, 23, 0.06);
  --shadow-md: 0 4px 12px -4px rgba(20, 26, 23, 0.12);
  --shadow-lg: 0 16px 40px -12px rgba(20, 26, 23, 0.20);

  /* ── Layout ───────────────────────────────────────────── */
  --appbar-h:  56px;
  --sidebar-w: 232px;
  --content-narrow: 880px;   /* forms and single-column reading, centred */
  --content-wide:   1900px;  /* effectively "fill the window" on a laptop or
                                a 1080/1440 monitor; a ceiling only on ultrawide */

  --dur-fast: 110ms;
  --dur-med:  200ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   Dark theme. Granite at night: the neutrals stay cool and
   green-biased, the gold lifts so it still reads as action
   against a dark ground rather than disappearing into brown.
   ============================================================ */
:root[data-theme="dark"] {
  --stone-000: #0B0F0D;
  --stone-025: #101512;
  --stone-050: #171E1A;
  --stone-100: #222B26;
  --stone-200: #2F3A33;
  --stone-300: #47544B;
  --stone-400: #6B776F;
  --stone-500: #8B968E;
  --stone-600: #AAB4AD;
  --stone-700: #CDD5CF;
  --stone-800: #E4EAE6;
  --stone-900: #F2F5F3;

  --gold-050: #2A2110;
  --gold-100: #3D2F16;
  --gold-300: #8A6B1E;
  --gold-500: #D4A63C;
  --gold-600: #E2B855;
  --gold-700: #EDCA7A;

  --good-050: #10241A;  --good-500: #4FA97A;  --good-700: #7FC79E;
  --warn-050: #2A2110;  --warn-500: #D0A344;  --warn-700: #E3BE6C;
  --bad-050:  #2A1613;  --bad-500:  #D9765F;  --bad-700:  #E99B88;
  --info-050: #101F24;  --info-500: #5E9DB2;  --info-700: #8CBDCC;

  --bg:            var(--stone-025);
  --bg-sunken:     var(--stone-000);
  --surface:       var(--stone-050);
  --surface-alt:   var(--stone-100);
  --border:        var(--stone-100);
  --border-strong: var(--stone-200);

  --text:          var(--stone-800);
  --text-body:     var(--stone-600);
  --text-muted:    var(--stone-500);
  --text-faint:    var(--stone-400);
  --text-invert:   var(--stone-025);

  --accent:        var(--gold-500);
  --accent-hover:  var(--gold-600);
  --accent-text:   var(--gold-700);
  --accent-wash:   var(--gold-050);
  --accent-line:   var(--gold-100);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px -4px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
}