/* ============================================================
   FogMonkey — design tokens
   Drop into wwwroot/css/ and reference from your layout.
   Theme switch = set [data-theme="dark"] on <html> (or a wrapper).
   All component CSS should read these var()s — never hardcode hex.
   ============================================================ */

/* ---------- Customer brand (warm = default) ---------- */
:root {
  --bg:      #faf5ec;   /* app background / desk           */
  --surface: #fffdf8;   /* cards, sheets, page surface     */
  --ink:     #2b2420;   /* primary text                    */
  --muted:   #544940;   /* secondary text - see note below  */
  --faint:   #776b60;   /* tertiary text, placeholders - WCAG AA, see note */
  --line:    #efe5d5;   /* borders, dividers               */
  --soft:    #fbf6ee;   /* subtle fills, table headers     */
  --brand:   #ef6a41;   /* primary action (coral)          */
  --brand2:  #ffe8de;   /* brand tint (chips, held-badge)  */
  --brandink:#a94a2c;   /* text on brand tint              */
  --ok:      #2f9e6f;   /* available / success             */
  --okbg:    #eef8f1;
  --okline:  #d4ecdd;
  --warn:    #c98a2e;   /* refund / attention              */
  --warnbg:  #fbf1de;
  --err:     #c4472c;   /* error / declined                */
  --errbg:   #fbeee9;
  --errline: #f0cabb;
  --field:   #ffffff;   /* input backgrounds               */
  --chip:    #1a1f71;   /* card-brand chip (Visa navy)     */
  --heroA:   #ffe8de;   /* hero gradient stop 1            */
  --heroB:   #fdf0e4;   /* hero gradient stop 2            */

  /* radii */
  --r-btn: 16px;
  --r-card: 16px;       /* 18px on desktop result rows     */
  --r-input: 13px;
  --r-pill: 22px;

  /* type */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif; /* headings, prices, wordmark; weights 600–800 */
  --font-ui:      'Hanken Grotesk', system-ui, sans-serif;      /* body + UI; weights 400–800                  */

  /* shadow (warm) — elevation via soft shadow */
  --shadow-card: 0 18px 40px -30px rgba(43,36,32,.4);

  /* --muted was #867669, which measures 4.30:1 on --surface and therefore FAILED WCAG AA for
     normal text (4.5:1). It is used for real running copy - hero subhead, card body, field notes -
     not just decoration, so that was a genuine accessibility defect rather than a taste call.

     #544940 measures 8.59:1, clearing AAA (7:1) with room to spare.

     Deliberately NOT darker: at #433a33 (10.92:1) secondary text sits only 1.37:1 away from --ink
     itself and stops reading as secondary at all, collapsing the type hierarchy. #544940 keeps a
     1.75:1 separation from --ink, so the distinction survives.

     Dark theme is untouched: its --muted #b0a08e already measures 6.70:1 and passes. */
}

/* ---------- Customer brand (dark) ---------- */
:root[data-theme="dark"] {
  --bg:      #171310;
  --surface: #211b16;
  --ink:     #f4ede2;
  --muted:   #b0a08e;
  --faint:   #9b8f82;   /* tertiary text - WCAG AA, see note */
  /* Lightened with --field below - the two move TOGETHER. Every --field surface in site.css is
     drawn as `1.5px solid var(--line)` over `background: var(--field)`, so the border is what makes
     an input read as an input. Lifting --field alone would raise field-vs-surface 1.09 -> 1.20:1 but
     collapse border-vs-field 1.18 -> 1.07:1, and the edge effectively disappears.
     At #43382c both improve on the old pair: 1.20:1 and 1.25:1.
     --line is also the dark card edge (--shadow-card below), so card definition lifts to match. */
  --line:    #43382c;
  --soft:    #2a221b;
  --brand:   #e08d5f;   /* softened coral — DO NOT use #ef6a41 on dark */
  --brand2:  #3a2118;
  --brandink:#f6b79c;
  --ok:      #49c48a;
  --okbg:    #18271f;
  --okline:  #2c473a;
  --warn:    #e0a94a;
  --warnbg:  #2c2413;
  --err:     #f08163;
  --errbg:   #2c1a15;
  --errline: #4a2c22;
  /* Was #2a221b, which sat only 1.09:1 from --surface - inputs barely read as inputs on dark.
     See the --line note above: these two are a pair, do not change one alone. */
  --field:   #322920;
  --heroA:   #3a2118;
  --heroB:   #251c16;
  /* --chip stays #1a1f71 (real Visa navy, constant) */
  /* in dark, prefer borders over shadows for elevation */
  --shadow-card: 0 0 0 1px var(--line);
}

/* ============================================================
   Admin (internal tool) — intentionally NOT the brand.
   Neutral slate, denser, sharper corners, blue accent.
   Scope under a wrapper class so it never mixes with brand.
   ============================================================ */
.fm-admin {
  --bg:      #f4f5f7;
  --panel:   #ffffff;
  --ink:     #1a2230;
  --muted:   #5b6675;
  --faint:   #8b95a4;
  --line:    #e3e7ed;
  --line2:   #eef1f5;
  --accent:  #2f5bff;   /* admin accent is BLUE, not coral */
  --accentbg:#eef2ff;
  --ok:      #0f8a4d;  --okbg:#e7f6ee;
  --warn:    #b7791f;  --warnbg:#fbf3e2;
  --err:     #c0392b;  --errbg:#fbecea;
  --purple:  #6b46c1;  --purplebg:#f0ebfa;
  --r-card: 12px;      /* sharper than brand */
  --font-ui: -apple-system, 'Segoe UI', system-ui, sans-serif;
  /* sidebar stays dark navy regardless of light/dark app theme */
  --sidebar: #141a24; --sidebar2: #1c2431;
}
.fm-admin[data-theme="dark"] {
  --bg:      #12161d;
  --panel:   #1b2230;
  --ink:     #e7ecf3;
  --muted:   #9aa5b4;
  --faint:   #6b7686;
  --line:    #2b3340;
  --line2:   #232a35;
  --accent:  #5b82ff;  --accentbg:#20283c;
  --ok:      #3fbf77;  --okbg:#15271d;
  --warn:    #d8a63f;  --warnbg:#2c2413;
  --err:     #e5604f;  --errbg:#2e1a17;
  --purple:  #a78bea;  --purplebg:#241f34;
}