/* ============================================================================
   Chilli ERP V6 — Foundation layer
   Spec: docs/superpowers/specs/2026-07-24-ui-ux-makeover-design.md
   ----------------------------------------------------------------------------
   The ONE source of truth for colour, type, density and spacing. Every screen
   inherits from here. This replaces the ~250 ad-hoc hex colours and the three
   competing palettes (legacy Flat-UI + si6 + Accounts navy).

   NOTE (rollout): this file defines the system + a starter component set. It is
   NOT yet wired into index.html / applied across live screens — that is the
   next, carefully-verified pass. Nothing here changes the running app until it
   is linked. Load it FIRST (before style.css) when we do wire it in.
   ============================================================================ */

/* ---- Font: self-hosted Inter (variable). No CDN — CSP/offline safe. -------- */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/inter.woff2") format("woff2");
}

/* ============================================================================
   1. TOKENS  (Direction C — "Forest + Sand")
   All hex values are working values; fine-tunable, but the SYSTEM is fixed.
   WCAG AA VERIFIED 2026-07-24 (script): all text/background pairs >= 4.5.
   Adjusted from the mockups to pass: --accent #a86e22->#9c641e, --ink-3
   #939c93->#6c736a. Rule: solid success = --pos-deep (not --pos); links =
   --accent-2 (not --accent). Re-run the check if any token changes.
   ============================================================================ */
:root{
  /* brand — table column headers, active tabs, in-screen topbars; also the
     colour a handful of "New X" buttons and labels use as TEXT on a white
     background elsewhere in the app. USER-SELECTABLE as "Ground" (see §1c
     below) — Forest and Charcoal ONLY. A light-ground option (Sand/Pale
     Sage/Warm Grey) was tried 2026-08-19 and dropped the same session: this
     token is reused as plain TEXT color in several places (the "New X"
     button family, a few labels) that assumed it would always be dark, and a
     light Ground made that text unreadable. Fixing it properly meant
     splitting brand-as-text from brand-as-chrome into two tokens — ruled
     out as more machinery than two extra ground presets were worth. Keeping
     Ground to Forest/Charcoal (both dark) means --brand-ink is always white
     and the single-token design stays safe. */
  --brand:#2f5240;   --brand-2:#3c6650;   --brand-tint:#e9efe9;  --brand-ink:#fff;
  /* accent — active state + accent buttons. USER-SELECTABLE (like Text Size):
     the default below is overridden by html[data-accent="…"] presets (see §1b).
     All presets AA-verified. Links use --accent-2; accent buttons use white text. */
  --accent:#9e4f2e;  --accent-2:#874327;  --accent-tint:#f4e7e0;   /* default: Rust/Sienna */
  /* grounds — warm paper; NEVER pure #fff on large areas */
  --bg:#f4f2ec;      --surface:#fffefb;   --head:#efeadf;
  /* ink — slate, not black. --ink-3 darkened #939c93->#6c736a so muted TEXT +
     field labels pass AA (4.84); use it for muted text, not just decoration. */
  --ink:#222a25;     --ink-2:#5d675f;     --ink-3:#6c736a;
  /* structure */
  --line:#e3ddd0;    --line-2:#efeade;
  /* --zebra: the alternating table row. One value for the whole app, so the
     screen-by-screen table rollout references a token instead of repeating a
     hex. Already the stripe used by the Purchase entry and invoice; agreed with
     Ali 2026-07-27 as part of the single table standard (sentence-case headers,
     zebra on, forest header, sand total row). */
  --zebra:#faf8f2;
  /* semantics — colour ONLY for meaning; one meaning each, everywhere.
     --pos is bright for dots/emphasis; white text on it FAILS AA, so any SOLID
     success control uses --pos-deep (white-on-it = 5.38). */
  --pos:#2e9e57;     --pos-deep:#1c7a3f;  --pos-tint:#e7f4ec;   /* in / positive */
  --out-deep:#2f5240; /* Jobs' Output box identity — fixed forest, S138 (the color list pages themselves were originally built around), independent of the Settings > Ground picker. Deliberately decoupled from --pos-deep (Session 80: Ali found pos-deep too bright/vivid for a large solid table-header fill; --pos-deep itself must stay untouched, it's also Save's color everywhere) */
  --in-deep:#2b302c; /* Jobs' Input box identity — fixed charcoal, S138, independent of the Settings > Ground picker. A dedicated token rather than reusing --ink-2/--ink-3 (Input's old colors), since those two are generic app-wide text/border tokens used far beyond this one box — repointing them would ripple everywhere, not just here. */
  --sum-deep:#3a5779; /* Jobs' Final Costing box identity — fixed slate, S138. Was theme-following (var(--brand)); pulled off the Ground picker onto its own permanent color, same reasoning as --in-deep/--out-deep. RFS is the only one of the 5 boxes still theme-following. */
  --neg:#c0433c;     --neg-deep:#9c332d;  --neg-tint:#fbe9e7;   /* out / negative / danger */
  --warn:#b47516;    --warn-deep:#ab4d0c; --warn-tint:#f7edd8;  /* warning / in-process. --warn-deep retuned 2026-07-28 (Session 79 spec sec 8): was #8f5c10 (read golden), now a genuinely orange hue, 5.53:1 */
  --low:#9c4718;                          --low-tint:#fce4d0;   /* below-range flag (e.g. low avg-weight) — orange highlight, sibling to --neg (high), AA 5.15 */
  --attn:#9f6604;                         /* Session 80: Return + Go-to-Job's own attention color, deliberately decoupled from the user-switchable --accent. Retuned from #b1441f (red-orange, hue 15 - too close to --neg and --warn-deep in the Purchase Actions column) to a genuine orange (hue 38), 4.80:1, clear of both */
  --sage:#e9efe9;    --sage-ink:#3c6650;  --sage-line:#bcd0c2;  /* View/Detail — soft, "just looking," deliberately not solid like Cancel */
  /* --caution: a TRUE yellow, added Session 99. The app had none — --warn is a
     dark golden and --warn-deep a burnt orange, both picked to sit beside the
     rust, and Ali was right that neither reads as caution: "i need some yellow
     color as amber [or it] does not give me same feeling as something to
     caution", then "we need to add yellow in our design".
     ITS ONE JOB: *careful, look at this* — an unusual weight, a stale lot.
     Red stays "wrong, stop"; --warn-deep stays Edit + in-process. A fourth
     signal colour only works if each keeps one meaning.
     ALWAYS a FILL carrying a DARK mark — never button text, never a hairline.
     White on this yellow is 1.61:1 (fails everything); --caution-ink on it is
     10.4:1. A 1px yellow line also disappears against --bg sand. That is why
     ic-warn is a filled triangle with dark ink, not a stroked outline. */
  --caution:#f5c518; --caution-edge:#6b4a04; --caution-ink:#3a2c05; --caution-tint:#f7dfa0;
  /* --caution-edge/--caution-tint deepened S153 — Ali: the Elevated shortage
     badge (Jobs %) read as "very dull" next to Low's orange and Very High's
     red, both of which are dark/saturated shades of their hue. The old pair
     (#a8790a on #fdf4d8) was too close in lightness to the page's cream
     background to carry the same visual weight. Same yellow FAMILY, just a
     much deeper tone — not a hue change — so it still reads as "caution,"
     not "danger" or "low." Contrast on the new pair: 6.15:1 (was ~3.9:1).
     --caution itself (the bright fill) and --caution-ink (the icon's mark)
     are untouched — ic-warn's fill was never the dull part, only the thin
     stroke that reads var(--caution-edge). */

  /* shape */
  --radius:11px;  --radius-sm:8px;  --radius-pill:99px;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.05);
  --shadow-pop:0 16px 34px rgba(16,24,40,.16);

  /* ---- Type + density -----------------------------------------------------
     rem anchor: rem resolves against THIS root font-size. The Text Size
     control (Settings) sets html[data-text-size]; everything else is in rem,
     so the whole app rescales from one value.
     Default (medium) ≈ 15px → 100% zoom reads like the old comfortable 110%. */
  font-size:15px;                        /* the rem anchor */
  --fs-base:1rem;                        /* 15px  body / table cells */
  --fs-sm:0.867rem;                      /* 13px  secondary / lot ids */
  --fs-lbl:0.733rem;                     /* 11px  uppercase field labels */
  --fs-kpi:1.4rem;                       /* 21px  KPI values */
  --fs-h1:1.5rem;                        /* 22.5px page titles */
  --lh:1.45;

  --sp-1:0.25rem; --sp-2:0.5rem; --sp-3:0.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --row-h:2.15rem;                       /* ~32px table rows */
}

/* Text Size control — sets the rem anchor live, remembered per device */
html[data-text-size="s"]{ font-size:14px; }
html[data-text-size="m"]{ font-size:15px; }   /* default */
html[data-text-size="l"]{ font-size:16.5px; }

/* ---- §1b. Accent presets — USER-SELECTABLE, remembered per device ----------
   Semantics (pos/neg/warn) and brand stay fixed; only the accent triplet
   changes. Every preset is WCAG AA verified (white-on-accent >=4.5,
   accent-2-on-surface >=4.5). Curated set only — no free colour picker. */
html[data-accent="rust"]     { --accent:#9e4f2e; --accent-2:#874327; --accent-tint:#f4e7e0; } /* default */
html[data-accent="terracotta"]{ --accent:#a9542e; --accent-2:#8f4526; --accent-tint:#f6e9e1; }
html[data-accent="ochre"]    { --accent:#9c641e; --accent-2:#8f5c18; --accent-tint:#f5eddd; }
html[data-accent="bronze"]   { --accent:#7e5427; --accent-2:#6c481f; --accent-tint:#efe7db; }
html[data-accent="copper"]   { --accent:#9a5a29; --accent-2:#814a22; --accent-tint:#f2e6da; }
html[data-accent="charcoal"] { --accent:#2b302c; --accent-2:#1f2321; --accent-tint:#e8e8e7; }

/* ---- §1c. Ground presets — USER-SELECTABLE, remembered per device ----------
   Ali shortlisted 10 of 20 AA-verified combinations 2026-07-27 (Session 78) —
   docs/superpowers/specs/2026-07-27-table-standard.md §5. Ground = table
   column headers, active tabs, in-screen topbars — there is no top chrome bar
   to theme (nav redesigned since; see CLAUDE.md Navigation).
   DARK/NEUTRAL ONLY (2026-08-19, Ali's call): a light-ground option was tried
   and dropped the same session — see the note on --brand above. Every preset
   here sets --brand* (not a separate token) and keeps white header text,
   which is what makes the single-token design safe: none of these are light
   enough to break the "New X" button family or any other --brand-as-text use.
   Trimmed to three (2026-08-19, Ali: "i like only one slate... ok 3 fine") —
   warm default / true neutral / one cool alternative, from a 10-candidate
   shortlist shown as an artifact. The other seven (Graphite, Olive, Navy,
   Deep Teal, Maroon, Indigo, Plum) are still in Ali's shortlisted-10 in the
   spec doc if this ever needs revisiting, just not wired into Settings. */
html[data-ground="forest"]   { --brand:#2f5240; --brand-2:#3c6650; --brand-tint:#e9efe9; --brand-ink:#fff; } /* default */
html[data-ground="charcoal"] { --brand:#2b302c; --brand-2:#3a413c; --brand-tint:#e8e8e7; --brand-ink:#fff; }
html[data-ground="slate"]    { --brand:#3a5779; --brand-2:#4a6b8f; --brand-tint:#e6eaf0; --brand-ink:#fff; }

/* Dark mode is intentionally PARKED (see spec §2.2). Light, low-brightness only. */

/* ============================================================================
   2. BASE
   ============================================================================ */
.fnd{
  font-family:"Inter",ui-sans-serif,"Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
  font-size:var(--fs-base);
  line-height:var(--lh);
  color:var(--ink);
  background:var(--bg);
  font-variant-numeric:tabular-nums;      /* digits line up in columns app-wide */
  -webkit-font-smoothing:antialiased;
}
.fnd :focus-visible{ outline:2px solid var(--accent); outline-offset:1px; border-radius:6px; }

/* ============================================================================
   3. STARTER COMPONENT SET  (built entirely from tokens)
   These replace per-screen variants + inline style="background:#…" buttons.
   ============================================================================ */

/* Buttons */
.btn{ font:inherit; font-size:var(--fs-sm); font-weight:650; line-height:1;
  padding:0.6rem 1.1rem; border-radius:var(--radius-sm); border:1px solid transparent;
  cursor:pointer; display:inline-flex; align-items:center; gap:0.4rem; }
.btn-primary{ background:var(--brand); color:#fff; }
.btn-primary:hover{ background:var(--brand-2); }
.btn-accent{ background:var(--accent); color:#fff; }
.btn-accent:hover{ background:var(--accent-2); }
.btn-ghost{ background:var(--surface); color:var(--ink-2); border-color:var(--line); }
.btn-ghost:hover{ background:var(--brand-tint); color:var(--ink); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* Cards / panels */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); }

/* Inputs */
.inp{ width:100%; font:inherit; font-size:var(--fs-sm); color:var(--ink);
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:0.5rem 0.7rem; }
.inp:focus{ outline:2px solid var(--accent); outline-offset:0; border-color:transparent; background:#fff; }
.lbl{ display:block; font-size:var(--fs-lbl); text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-3); font-weight:700; margin-bottom:var(--sp-1); }

/* Pills / badges */
.pill{ font-size:var(--fs-sm); font-weight:700; padding:0.2rem 0.6rem; border-radius:var(--radius-pill);
  display:inline-flex; align-items:center; gap:0.35rem; }
.pill-pos{ background:var(--pos-tint); color:var(--pos-deep); }
.pill-neg{ background:var(--neg-tint); color:var(--neg-deep); }
.pill-warn{ background:var(--warn-tint); color:var(--warn-deep); }
.pill-acc{ background:var(--accent-tint); color:var(--accent-2); }

/* Status dots — encode state in form as well as colour */
.dot{ display:inline-block; width:0.5rem; height:0.5rem; border-radius:50%; margin-right:0.4rem; }
.dot-g{ background:var(--pos); }  .dot-a{ background:var(--warn); }  .dot-r{ background:var(--neg); }

/* Semantic text */
.t-pos{ color:var(--pos-deep); font-weight:650; }
.t-neg{ color:var(--neg); font-weight:650; }
.t-mut{ color:var(--ink-3); }
.t-link{ color:var(--accent-2); font-weight:650; text-decoration:none; }
.t-link:hover{ text-decoration:underline; }

/* Data table (the app's workhorse) — sticky header, right-aligned tabular
   numerics, no-colspan tfoot totals. One component to replace per-screen tables. */
.tbl{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.tbl thead th{ position:sticky; top:0; background:var(--head); color:var(--ink-2);
  font-size:var(--fs-lbl); text-transform:uppercase; letter-spacing:.05em; font-weight:700;
  text-align:right; padding:0.55rem 0.85rem; border-bottom:1px solid var(--line); }
.tbl th.tl, .tbl td.tl{ text-align:left; }        /* opt-in left align (text cols) */
.tbl tbody td{ padding:0.5rem 0.85rem; text-align:right; border-bottom:1px solid var(--line-2);
  font-size:var(--fs-sm); height:var(--row-h); }
.tbl tbody tr:nth-child(even){ background:#faf8f2; }
.tbl tbody tr:hover{ background:var(--brand-tint); }
.tbl tfoot td{ padding:0.6rem 0.85rem; text-align:right; font-weight:750; background:var(--head);
  border-top:2px solid var(--line); font-size:var(--fs-sm); }

/* Wide content scrolls inside its own container — page never scrolls sideways */
.scroll-x{ overflow-x:auto; }