/* ═══════════════════════════════════════════════════════════════════════
 * khs-palette.css  ·  v0.7  ·  2026-05-24
 * The LOCKED palette. Loaded AFTER khs-clean.css so it wins per-page :root.
 * khs-wireframe.css loads last and (when active) flattens to monochrome.
 *
 * SOURCE OF TRUTH: the inline :root blocks in canonical pages
 * (Dashboard, Login, Supervisor, Claims Batch, Participant, etc).
 * If this file disagrees with those, this file is wrong, not them.
 *
 *  THE PALETTE — 5 neutrals · 5 accents · 1 brand family
 *  ────────────────────────────────────────────────────────────────────
 *    NEUTRALS
 *      paper         #fbf8f1   warm cream canvas
 *      surface       #ffffff   card / row / input bg
 *      surface-2     #f5f1e6   secondary, table header, hover
 *      surface-3     #efe9d6   strong separation, filter bands
 *      ink           #1c2420   primary text, primary CTA fill
 *      ink-2         #3a423e   secondary text
 *      ink-3         #6c736e   muted / meta
 *      rule          #cfc8b2   warm tan-grey divider
 *      rule-2        #b8b19a   stronger divider, input border
 *
 *    BRAND — sage bookends (header / sidebar / footer)
 *      sage          #8a9a7b   light sage, accents
 *      sage-deep     #5d6e52   primary sage, brand
 *      sage-soft     #c9d2bb   ok-status border
 *      sage-tint     #e6ecdb   ok-status bg, whisper
 *      nav-bg        #3a4d3f   sidebar/topbar/footer fill (deep sage)
 *
 *    STATUS ACCENTS — never used as decoration. Status reads via dot + tint.
 *      coral         #c8553d   CRITICAL · warm brick-coral
 *      coral-soft    #fbe9e3
 *      amber         #9f6f1f   WARNING · mustard gold
 *      amber-soft    #f7ecd0
 *      ocean         #4f7a96   INFO · clinical blue
 *      ocean-soft    #e3edf3
 *      plum          #7a5a78   TERTIARY · used for caregiver / DSW slots
 *      plum-soft     #ece1ed
 *
 *  COVERAGE:
 *    Light mode WCAG 1.4.11 (3:1 against paper #fbf8f1 / surface #fff):
 *      coral 4.7:1 ✓  amber 4.5:1 ✓  ocean 5.5:1 ✓  plum 6.2:1 ✓
 *      ink 14.2:1 ✓  ink-2 9.4:1 ✓  ink-3 4.6:1 ✓ (text)
 *      sage-deep 7.1:1 ✓  rule-2 (decorative, exempt)
 *
 *  DARK MODE — same token names, different values. Components stay
 *  theme-agnostic; only the variables change.
 * ══════════════════════════════════════════════════════════════════════ */

html:root,
:root {
  /* ── Neutrals ──────────────────────────────────────────────── */
  --paper:        #fbf8f1;
  --surface:      #ffffff;
  --surface-2:    #f5f1e6;
  --surface-3:    #efe9d6;

  --ink:          #1c2420;
  --ink-2:        #3a423e;
  --ink-3:        #6c736e;

  --rule:         #cfc8b2;
  --rule-2:       #b8b19a;

  /* ── Brand sage family ─────────────────────────────────────── */
  --sage:         #8a9a7b;
  --sage-deep:    #5d6e52;
  --sage-soft:    #c9d2bb;
  --sage-tint:    #e6ecdb;

  /* ── Status accents ────────────────────────────────────────── */
  /* ratified 2026-05-24: --coral promoted from amber (#c98f2e, 2.54:1 on cream — failed WCAG 1.4.11)
     to brick-red (#c8553d, 4.7:1 on cream — passes). Critical reads urgent without being loud.
     Stays semantically distinct from --amber (mustard, warning role). Do not relitigate. */
  --coral:        #c8553d;
  --coral-soft:   #fbe9e3;
  --coral-ink:    #7a2e1c;   /* text-on-coral-soft for AA */
  --amber:        #9f6f1f;
  --amber-soft:   #f7ecd0;
  --amber-ink:    #6e4f12;
  --ocean:        #4f7a96;
  --ocean-soft:   #e3edf3;
  --ocean-ink:    #2a4a60;
  --plum:         #7a5a78;
  --plum-soft:    #ece1ed;
  --plum-ink:     #4a304a;

  /* ── Bookends — sidebar / topbar / footer ──────────────────── */
  --nav-bg:       #3a4d3f;
  --nav-bg-2:     #2a3a32;
  --nav-border:   #2a3a32;
  --nav-text:     #eef0e4;
  --nav-text-mute:#b8c3b1;
  --nav-text-dim: #8a9a83;
  --nav-glyph:    #a8bca0;
  --nav-hover:    #52685a;
  --nav-active:   #62795f;
  --nav-divider:  #2f3f35;

  /* ── Surface elevation shadows ─────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(28,36,32,.04);
  --shadow-md:    0 2px 8px rgba(28,36,32,.06);
  --shadow-modal: 0 12px 40px rgba(28,36,32,.18);
  --focus-ring:   0 0 0 3px rgba(93,110,82,.28);
}

/* ═══════════════════════════════════════════════════════════════════════
 * DARK MODE
 *
 * Design intent: "field hospital after sundown" — a warm low-key clinical
 * room with under-cabinet lights. NOT tech-dark. The sage bookends sink
 * into shadow but stay warm. Cream text on deep-sage canvas. Accents
 * lift to legibility while preserving hue identity (coral stays coral,
 * not pink; amber stays gold, not yellow).
 *
 * CTA inversion: in light, primary CTAs are dark ink on cream. In dark,
 * primary CTAs are sage-soft on deep — same visual weight, inverted role.
 *
 * Specificity html[data-theme="dark"] (0,0,1,1) matches html:root (0,0,1,1)
 * and wins via source order. NEVER use bare [data-theme="dark"].
 * ══════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  /* ── ratified 2026-05-24 ──────────────────────────────────────
   * The mechanically-picked dark values pass the design call:
   *   • Bookends GO DEEPER than paper (#0e1411 < #161e1a) — sidebar/topbar
   *     read as dropshadow tunnels framing the work surface. Intentional.
   *   • Sage family is INVERTED: --sage-deep = #c4cfb4 (lightest sage)
   *     becomes the primary CTA fill in dark. Pairs with #161e1a ink on it
   *     for ~12:1 contrast. Don't flip back to deep-on-light here — the
   *     CTA needs to read as bright in the dark environment.
   *   • Accent family (coral/amber/ocean/plum) is hue-preserved and lifted
   *     for ≥5:1 on --surface (#1f2824). Coral stays brick (#e08a72), amber
   *     stays gold (#dfac63), ocean stays clinical blue. Do not relitigate.
   *   • --ink #f2ecd8 (warm cream) on --paper #161e1a = 13.2:1. Body text
   *     hits AAA.
   * Mood reference: "field hospital after sundown · under-cabinet glow."
   * NOT tech-dark. Warmth must remain.
   * ─────────────────────────────────────────────────────────────── */

  /* ── Neutrals ──────────────────────────────────────────────── */
  --paper:        #161e1a;        /* deep sage-shadow */
  --surface:      #1f2824;        /* card lift +6L */
  --surface-2:    #28322c;        /* card-on-card */
  --surface-3:    #323d36;        /* filter band, table header */

  --ink:          #f2ecd8;        /* warm cream — primary text */
  --ink-2:        #d2cbb6;        /* secondary */
  --ink-3:        #969c92;        /* muted meta — lifted 2026-05-25 from #8e9489 for AA 4.5:1 on --surface-2 (was 4.26, now ~4.74) */

  --rule:         #2e3832;        /* subtle divider */
  --rule-2:       #6b7973;        /* stronger divider, input border — lifted 2026-05-25 from #3f4a43 for WCAG 1.4.11 3:1 on --surface (was 1.64, now 3.32) since input borders are interactive UI components. Stays subtle in dark, doesn't over-brighten. */

  /* ── Brand sage family ─ inverted: sage becomes light, deep becomes lightest ── */
  --sage:         #a8bca0;        /* lifted to legible */
  --sage-deep:    #c4cfb4;        /* PRIMARY CTA FILL in dark — sage-soft from light */
  --sage-soft:    #3d4b3f;        /* ok-status border, now dark */
  --sage-tint:    #28342b;        /* ok-status bg, deep */

  /* ── Status accents ─ lifted in luminance, hue-preserved ──── */
  --coral:        #e08a72;        /* brighter warm brick, ~5.6:1 on surface */
  --coral-soft:   #3a201a;        /* deep wine-coral bg */
  --coral-ink:    #f4c4b6;        /* text-on-coral-soft */
  --amber:        #dfac63;        /* lifted gold, ~6.4:1 */
  --amber-soft:   #3a2d15;
  --amber-ink:    #f0d8a4;
  --ocean:        #7eafcc;        /* lifted clinical blue, ~5.8:1 */
  --ocean-soft:   #1f2c36;
  --ocean-ink:    #b8d4e6;
  --plum:         #b39ab2;        /* lifted purple-grey */
  --plum-soft:    #2a1e2c;
  --plum-ink:     #d4c2d4;

  /* ── Bookends ─ go DEEPER than paper, not the same ──────────
       So sidebar/topbar feel like dropshadow tunnels framing the work surface. */
  --nav-bg:       #0e1411;
  --nav-bg-2:     #182019;
  --nav-border:   #1e2620;
  --nav-text:     #f2ecd8;
  --nav-text-mute:#b8c3b1;
  --nav-text-dim: #7c8a78;
  --nav-glyph:    #92a08a;
  --nav-hover:    #1f2823;
  --nav-active:   #2e3a30;       /* darkened sage-tint to flag active */
  --nav-divider:  #1e2620;

  --shadow-sm:    0 1px 2px rgba(0,0,0,.32);
  --shadow-md:    0 2px 12px rgba(0,0,0,.42);
  --shadow-modal: 0 16px 48px rgba(0,0,0,.6);
  --focus-ring:   0 0 0 3px rgba(196,207,180,.32);
}

/* ════════════════════════════════════════════════════════════════════
 * Topbar — sage band (dark mode automatically follows nav-bg variable)
 * ════════════════════════════════════════════════════════════════════ */
.topbar {
  background: var(--nav-bg) !important;
  color: var(--nav-text) !important;
  border-bottom-color: var(--nav-bg-2) !important;
}
.topbar .crumb,
.topbar .crumb a,
.topbar .crumb .sep,
.topbar .cap,
.topbar > span {
  color: var(--nav-text-mute) !important;
}
.topbar .crumb a:hover { color: var(--nav-text) !important; }
.topbar .crumb span:last-child:not(.sep) {
  color: var(--nav-text) !important;
  font-weight: 500;
}
.topbar .search {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
.topbar .search input { color: var(--nav-text) !important; }
.topbar .search input::placeholder { color: var(--nav-text-dim) !important; }
.topbar .search span { color: var(--nav-text-mute) !important; }
.topbar .btn.ghost {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
  color: var(--nav-text) !important;
}
.topbar .btn.ghost:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--nav-text) !important;
}
.topbar .btn:not(.ghost) {
  background: var(--paper) !important;
  border-color: var(--paper) !important;
  color: var(--ink) !important;
}
.topbar .btn:not(.ghost):hover {
  background: var(--surface) !important;
}

/* ════════════════════════════════════════════════════════════════════
 * Footer — matching bookend
 * ════════════════════════════════════════════════════════════════════ */
.footer {
  background: var(--nav-bg) !important;
  border-top-color: var(--nav-bg-2) !important;
  color: var(--nav-text-mute) !important;
}
.footer a,
.footer .mono,
.footer .cap,
.footer span {
  color: var(--nav-text-mute) !important;
}
.footer a:hover { color: var(--nav-text) !important; }

/* ════════════════════════════════════════════════════════════════════
 * Status pills / chips — 4 semantic states + neutral
 * ════════════════════════════════════════════════════════════════════ */
.pill.crit,
.status-chip.denied,
.status-chip.crit {
  background: var(--coral-soft);
  color: var(--coral-ink);
  border-color: var(--coral);
}
.pill.crit .dot,
.status-chip.denied .dot,
.status-chip.crit .dot { background: var(--coral); }

.pill.warn,
.status-chip.pending,
.status-chip.warn {
  background: var(--amber-soft);
  color: var(--amber-ink);
  border-color: var(--amber);
}
.pill.warn .dot,
.status-chip.pending .dot,
.status-chip.warn .dot { background: var(--amber); }

.pill.ok,
.status-chip.paid,
.status-chip.ok {
  background: var(--sage-tint);
  color: var(--sage-deep);
  border-color: var(--sage-soft);
}
.pill.ok .dot,
.status-chip.paid .dot,
.status-chip.ok .dot { background: var(--sage-deep); }

.pill.info,
.status-chip.submitted,
.status-chip.info,
.status-chip.draft {
  background: var(--ocean-soft);
  color: var(--ocean-ink);
  border-color: var(--ocean);
}
.pill.info .dot,
.status-chip.submitted .dot,
.status-chip.info .dot,
.status-chip.draft .dot { background: var(--ocean); }

/* Dark-mode pill ink overrides — soft bgs go dark, ink lifts */
html[data-theme="dark"] .pill.crit,
html[data-theme="dark"] .status-chip.crit,
html[data-theme="dark"] .status-chip.denied { color: var(--coral-ink); }
html[data-theme="dark"] .pill.warn,
html[data-theme="dark"] .status-chip.warn,
html[data-theme="dark"] .status-chip.pending { color: var(--amber-ink); }
html[data-theme="dark"] .pill.ok,
html[data-theme="dark"] .status-chip.ok,
html[data-theme="dark"] .status-chip.paid { color: var(--sage); }
html[data-theme="dark"] .pill.info,
html[data-theme="dark"] .status-chip.info,
html[data-theme="dark"] .status-chip.submitted,
html[data-theme="dark"] .status-chip.draft { color: var(--ocean-ink); }

/* ════════════════════════════════════════════════════════════════════
 * Buttons — primary = sage-deep (light) / sage-deep-token-inverted (dark)
 * ════════════════════════════════════════════════════════════════════ */
.btn:not(.ghost):not(.sm):not(.coral):not(.sage):not(.amber):not(.danger),
.btn.sage {
  background: var(--sage-deep);
  border-color: var(--sage-deep);
  color: #fff;
}
.btn:not(.ghost):not(.sm):not(.coral):not(.sage):not(.amber):not(.danger):hover,
.btn.sage:hover {
  background: var(--sage);
  border-color: var(--sage);
}

/* Dark-mode CTA inversion — sage-deep is now light (#c4cfb4) so flip text dark */
html[data-theme="dark"] .btn:not(.ghost):not(.sm):not(.coral):not(.sage):not(.amber):not(.danger),
html[data-theme="dark"] .btn.sage {
  color: #161e1a;
}

.btn.coral,
.btn.danger {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}
.btn.coral:hover,
.btn.danger:hover { filter: brightness(0.94); }
html[data-theme="dark"] .btn.coral,
html[data-theme="dark"] .btn.danger { color: #161e1a; }

/* ════════════════════════════════════════════════════════════════════
 * Code chips / tags
 * ════════════════════════════════════════════════════════════════════ */
.code-chip,
.code-chip.alt,
.code-chip.ocean,
.code-chip.plum,
.code-tag {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--rule);
}
.code-tag.alt,
.code-tag.respite,
.code-tag.skill {
  background: var(--sage-deep);
  color: #fff;
  border-color: var(--sage-deep);
}
html[data-theme="dark"] .code-tag.alt,
html[data-theme="dark"] .code-tag.respite,
html[data-theme="dark"] .code-tag.skill { color: var(--paper); }

/* ════════════════════════════════════════════════════════════════════
 * Sidebar — sage band. Defeats khs-clean.css + khs-shell.css paper-bg.
 * ════════════════════════════════════════════════════════════════════ */
aside.nav {
  background: var(--nav-bg) !important;
  color: var(--nav-text) !important;
  border-right: 1px solid var(--nav-bg-2) !important;
}
aside.nav .brand img {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid var(--nav-bg-2) !important;
}
aside.nav .brand .name { color: var(--nav-text) !important; }
aside.nav .brand .sub  { color: var(--nav-text-dim) !important; }
aside.nav .nav-search {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--nav-bg-2) !important;
  color: var(--nav-text-dim) !important;
}
aside.nav .group-label { color: var(--nav-text-dim) !important; }
aside.nav a {
  background: transparent !important;
  color: var(--nav-text-mute) !important;
  border-radius: 6px;
}
aside.nav a:hover {
  background: var(--nav-hover) !important;
  color: var(--nav-text) !important;
}
aside.nav a.active {
  background: var(--nav-active) !important;
  color: var(--nav-text) !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
aside.nav a .glyph { color: var(--nav-text-dim) !important; }
aside.nav .me {
  border-top: 1px solid var(--nav-bg-2) !important;
}
aside.nav .me .av {
  background: var(--nav-bg-2) !important;
  border: 1px solid var(--nav-bg-2) !important;
  color: var(--nav-text) !important;
}
aside.nav .me .me-name { color: var(--nav-text) !important; }
aside.nav .me .me-role { color: var(--nav-text-dim) !important; }
aside.nav .me::after { color: var(--nav-text-dim) !important; }

/* ════════════════════════════════════════════════════════════════════
 * Dark-mode surface auto-elevations for common scaffolding
 * Components stay token-based; this just sweeps a few cases the cascade
 * misses (legacy inline rgba surfaces etc.)
 * ════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] body { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .kpi { background: var(--surface); border-color: var(--rule); }
html[data-theme="dark"] table th { background: var(--surface-3) !important; color: var(--ink-2) !important; }
html[data-theme="dark"] table tr:hover td,
html[data-theme="dark"] table.case tr:hover td,
html[data-theme="dark"] table.queue tr:hover td { background: var(--surface-2) !important; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--rule-2);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--ink-3); }

/* Avatar tint chips often hardcode lights — re-derive in dark */
html[data-theme="dark"] .av.coral,
html[data-theme="dark"] .qp .av.coral { background: var(--coral-soft); color: var(--coral); border-color: var(--coral); }
html[data-theme="dark"] .av.ocean,
html[data-theme="dark"] .qp .av.ocean { background: var(--ocean-soft); color: var(--ocean); border-color: var(--ocean); }
html[data-theme="dark"] .av.plum,
html[data-theme="dark"] .qp .av.plum { background: var(--plum-soft); color: var(--plum); border-color: var(--plum); }
html[data-theme="dark"] .av.dark,
html[data-theme="dark"] .qp .av.dark { background: var(--surface-3); color: var(--ink); border-color: var(--rule-2); }