/* =============================================================================
   DESIGN TOKENS — the single source of truth for color, type and shape.
   Added 2026-08-19 (Isaiah's design overhaul, reviewed with Brad 08-18).

   Every stylesheet and inline <style> block in app/ should draw from these
   custom properties instead of repeating hex values. The redesign is app/-only:
   site/ is frozen (mirroring retired 2026-08-19 — see CLAUDE.md) so nothing
   here is ever copied there.

   THE STATUS PALETTE HAS TWO TIERS, DELIBERATELY. The bright "fill" colors are
   for anything with area — bars, chips, dots, arrows, chart marks — where they
   read at full strength. They CANNOT carry small text on white (the old
   #16a34a green measured 3.30:1 at 13px; 4.5:1 is the floor), so small colored
   type takes the darker "text" tier. Never put a fill-tier color on 13px text,
   and never dim the fill tier to make text work — that's what the text tier is.

   The trio was validated, not eyeballed: the old green/red pair measured
   ΔE 5.0 under deuteranopia (indistinguishable — 8 is the floor); emerald
   #10b981 vs #ef4444 clears it at 8.1. Two rules keep it safe:
   - Color never travels alone: a colored figure carries an arrow + word, or
     sits in a labeled context (a goal column, a signed number).
   - Arrows mean TREND (vs recent data points) and nothing else. No trend
     data → no arrow. They never restate a goal state or a value's sign.

   Orange means WARNING and nothing else — the old UI used #e37400 both for
   every summary-card value and for the warning state, which made the headline
   figures permanently read as caution. Card values are plain ink now.

   Interactive color (links, active nav, sort state, buttons) is the brand
   cyan, and it is never used as a status.
   ============================================================================= */

:root {
  /* ---- Brand ---- */
  --navy: #0e1e40;            /* sidebar, tab bar, headers */
  --navy-deep: #091530;       /* pressed/hover on navy */
  --cyan: #0092d1;            /* interactive fills: active nav, primary buttons */
  --cyan-ink: #006e9e;        /* interactive TEXT on light (cyan itself is 3.4:1) */
  --cyan-wash: #e6f4fa;       /* hover/selected washes */
  --cyan-bright: #33b1e8;     /* interactive accents on navy/dark grounds */

  /* ---- Neutrals (the slate family the app already used, named once) ---- */
  --page: #f1f5f9;            /* page ground */
  --card: #ffffff;            /* card / section surface */
  --card-2: #f4f7fa;          /* table heads, totals rows */
  --soft: #f8fafc;            /* subtle inset panels */
  --ink: #0f172a;             /* primary text */
  --ink-2: #475569;           /* secondary text, labels */
  --ink-3: #94a3b8;           /* muted text, captions — large/incidental only */
  --rule: #e2e8f0;            /* borders */
  --rule-2: #f0f4f8;          /* hairline row separators */

  /* ---- Status: FILL tier (area: bars, chips, dots, arrows, chart marks) ---- */
  --good-fill: #10b981;
  --warn-fill: #fbbf24;
  --bad-fill:  #ef4444;

  /* ---- Status: TEXT tier (small type; all ≥4.5:1 on white and --page) ---- */
  --good-text: #047857;
  --warn-text: #b45309;
  --bad-text:  #b91c1c;

  /* ---- Status: WASH tier (row tints, badge backgrounds) ---- */
  --good-wash: rgba(16, 185, 129, .09);
  --warn-wash: rgba(251, 191, 36, .14);
  --bad-wash:  rgba(239, 68, 68, .09);

  /* ---- Categorical accent (NOT a status) ----
     For distinctions that are about kind or state rather than good/bad. Used by
     the auction-phase chips and the Property Performance occupancy line. Kept
     out of the status palette on purpose: an auctioned unit is the intended
     RESOLUTION of a delinquency, not a failure, so painting it red would lie. */
  --accent-violet:      #8b5cf6;   /* fill tier — chart lines, marks */
  --accent-violet-ink:  #6d28d9;   /* text tier — 5.98:1 on its own wash */
  --accent-violet-wash: #ede9fe;

  /* ---- Brand identity accents (NOT a status) — added 2026-10-07 (Isaiah) ----
     The two faces of the logo's cube, at their deeper ends (the paler ends fail the
     lightness band on white). Chart MARKS only — a single-series chart's line or bars —
     never text, card values or backgrounds, and never on anything good/bad: green here is
     not --good-fill, and orange is not a warning (that is --warn-*, the amber). Kept on
     separate charts: as a pair they are indistinguishable under protanopia (ΔE 1.5).
     Validated with the dataviz palette script: green passes contrast on white (≥3:1);
     orange is 2.98:1, so it only goes on marks that carry their own value labels. */
  --brand-green: #4f9743;
  --brand-orange: #e87225;

  /* ---- Type scale — six sizes, not seventeen ----
     xs: table headers, chips, captions      sm: table cells, body-in-cards
     md: page body, buttons                  lg: section/page titles
     xl: card headline figures               hero: the one number per page */
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 20px;
  --fs-xl: 32px;
  --fs-hero: 56px;

  /* ---- Shape — three radii ---- */
  --r-ctl: 8px;               /* buttons, inputs, chips */
  --r-card: 14px;             /* cards, sections, sheets */
  --r-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-card: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 16px -6px rgba(15, 23, 42, .12);

  /* ---- Face ---- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}