/* =====================================================================================
   butler-tokens.css — THE Butler Design Standard, as one shared stylesheet.
   Single source of truth for color, type, spacing, buttons and status chips across the
   whole Butler Suite. Born in the Report Engine (the pilot), copied verbatim by every
   other module afterward. Nothing here is module-specific.

   Author: Claude, to James's Butler Design Standard (approved 2026-08-11).
   Law 0: "A calm, near-white canvas where color appears only when it means something,
   one thin icon family, one card, one chip, one blue — so the important things are the
   loudest things on every screen."

   HOW A MODULE ADOPTS THIS FILE (the drop-in pattern the Report Engine proves):
     1. Link it FIRST, before the page's own <style>:
          <link rel="stylesheet" href="/report-engine/butler-tokens.css">
     2. In the page's own :root, point the page's existing variable NAMES at these tokens
        instead of hard-coded hex, e.g.:
          :root{ --brand: var(--bt-brand); --ink: var(--bt-ink); --bg: var(--bt-canvas); }
        Every existing rule that already says var(--brand) now recolours from the centre —
        no rule rewrite needed. That is the entire migration.
     3. Use .bt-btn / .bt-chip for NEW buttons and statuses so they match everywhere.

   THEMES: light is the default for everyone. Dark and High-Contrast are the same tokens
   with different values — a module gets all three for free just by linking this file.
   First visit follows the device's own light/dark preference; an explicit choice is
   stamped as data-theme="light|dark|hc" on <html> and always wins.
   ===================================================================================== */

/* ---- LIGHT (default) — every value is a named token, never a bare hex in a rule -------- */
:root{
  /* PALETTE — color = meaning, never decoration */
  --bt-canvas:#f7f8fa;        /* page background: soft neutral, never stark white */
  --bt-surface:#ffffff;       /* cards & sheets: the only "white" */
  --bt-surface-2:#f2f4f7;     /* insets, table zebra, quiet fills */
  --bt-ink:#171c22;           /* primary text: near-black (pure black vibrates) */
  --bt-muted:#5c6570;         /* secondary text */
  --bt-line:#e3e7ec;          /* hairline borders */

  --bt-brand:#0b6bcb;         /* THE blue: actions, links, focus, "this is tappable" */
  --bt-brand-strong:#0a5aad;  /* hover/active for brand */
  --bt-brand-tint:#e8f2fc;    /* brand-tinted backgrounds (selected, seals) */
  --bt-on-brand:#ffffff;      /* text/icon on a brand fill */

  --bt-ok:#178745;            /* pass / cleared / synced / done — status only */
  --bt-ok-strong:#12703a;
  --bt-ok-tint:#eaf5ee;
  --bt-on-ok:#ffffff;

  --bt-warn:#b57a00;          /* pending / attention / aging — status only */
  --bt-warn-strong:#966400;
  --bt-warn-tint:#fbf3e2;

  --bt-danger:#c4372c;        /* late / failed / danger — status only (lands like a siren) */
  --bt-danger-strong:#a52c22;
  --bt-danger-tint:#fbeeec;

  --bt-info:#5b53c7;          /* neutral-informational accent, used sparingly */
  --bt-info-tint:#ecebf8;

  --bt-focus:#0b6bcb;         /* focus ring color (same as brand) */

  /* TYPE — one system sans; sizes ONLY from this scale (12·14·16·18·22·28) */
  --bt-font: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --bt-mono: ui-monospace, 'Cascadia Mono', 'Roboto Mono', Consolas, Menlo, monospace;
  --bt-fs-12:12px; --bt-fs-14:14px; --bt-fs-16:16px;
  --bt-fs-18:18px; --bt-fs-22:22px; --bt-fs-28:28px;
  --bt-lh:1.5;

  /* SPACING — one 4px-based scale */
  --bt-sp-1:4px; --bt-sp-2:8px; --bt-sp-3:12px;
  --bt-sp-4:16px; --bt-sp-5:24px; --bt-sp-6:32px;

  /* SHAPE */
  --bt-radius:14px;        /* cards */
  --bt-radius-btn:10px;    /* buttons, inputs */
  --bt-radius-pill:999px;  /* chips */
  --bt-shadow:0 1px 4px rgba(23,28,34,.06);
  --bt-shadow-lift:0 4px 16px rgba(23,28,34,.10);

  /* THE TAP LAW — every tappable target ≥ 44px */
  --bt-tap:44px;
}

/* ---- DARK — same roles, flipped values. Applies when the device prefers dark AND the
        user hasn't forced light; an explicit data-theme="dark" also wins (block below). --- */
@media (prefers-color-scheme: dark) and (min-width:99999px){
  :root[data-theme="dark"]{
    --bt-canvas:#111519;
    --bt-surface:#1b2128;
    --bt-surface-2:#232b34;
    --bt-ink:#e6edf3;
    --bt-muted:#9aa7b4;
    --bt-line:#2b333d;

    --bt-brand:#4c9df0;        /* the same blue, tuned brighter for dark ground */
    --bt-brand-strong:#68b0f5;
    --bt-brand-tint:#16283b;
    --bt-on-brand:#0a1016;

    --bt-ok:#43b581;    --bt-ok-strong:#5ac596; --bt-ok-tint:#14251d; --bt-on-ok:#0a1016;
    --bt-warn:#e0a92e;  --bt-warn-strong:#f0bd4a; --bt-warn-tint:#2a2110;
    --bt-danger:#f0655a; --bt-danger-strong:#f5837a; --bt-danger-tint:#2c1512;
    --bt-info:#8f88e8;  --bt-info-tint:#1c1a30;
    --bt-focus:#4c9df0;

    --bt-shadow:0 1px 4px rgba(0,0,0,.45);
    --bt-shadow-lift:0 6px 22px rgba(0,0,0,.55);
  }
}
/* Explicit dark choice — wins in both directions (device-light user who picked dark) */
:root[data-theme="dark"]{
  --bt-canvas:#111519;
  --bt-surface:#1b2128;
  --bt-surface-2:#232b34;
  --bt-ink:#e6edf3;
  --bt-muted:#9aa7b4;
  --bt-line:#2b333d;

  --bt-brand:#4c9df0;
  --bt-brand-strong:#68b0f5;
  --bt-brand-tint:#16283b;
  --bt-on-brand:#0a1016;

  --bt-ok:#43b581;    --bt-ok-strong:#5ac596; --bt-ok-tint:#14251d; --bt-on-ok:#0a1016;
  --bt-warn:#e0a92e;  --bt-warn-strong:#f0bd4a; --bt-warn-tint:#2a2110;
  --bt-danger:#f0655a; --bt-danger-strong:#f5837a; --bt-danger-tint:#2c1512;
  --bt-info:#8f88e8;  --bt-info-tint:#1c1a30;
  --bt-focus:#4c9df0;

  --bt-shadow:0 1px 4px rgba(0,0,0,.45);
  --bt-shadow-lift:0 6px 22px rgba(0,0,0,.55);
}

/* ---- HIGH CONTRAST — pure ground, true text, 2px borders, no whisper-gray ------------- */
:root[data-theme="hc"]{
  --bt-canvas:#ffffff;
  --bt-surface:#ffffff;
  --bt-surface-2:#f0f0f0;
  --bt-ink:#000000;
  --bt-muted:#2a2a2a;          /* whisper-gray dies — full-weight secondary text */
  --bt-line:#000000;

  --bt-brand:#0546a0;
  --bt-brand-strong:#023072;
  --bt-brand-tint:#dbe8fb;
  --bt-on-brand:#ffffff;

  --bt-ok:#0f6b34;    --bt-ok-strong:#0a4f26; --bt-ok-tint:#dff0e5; --bt-on-ok:#ffffff;
  --bt-warn:#8a5c00;  --bt-warn-strong:#6e4a00; --bt-warn-tint:#f6e8c8;
  --bt-danger:#a5140b; --bt-danger-strong:#7d0f08; --bt-danger-tint:#f7dad7;
  --bt-info:#3b34a0;  --bt-info-tint:#e0def4;
  --bt-focus:#0546a0;
}

/* =====================================================================================
   COMPONENTS — the one button and the one chip. Use these for anything NEW; existing
   module rules recolour automatically once their :root points at the tokens above.
   ===================================================================================== */

/* THE BUTTON — 44px min, smooth corners, one filled primary per screen region.
   Variants: --primary (filled blue) · --secondary (outline blue) · --subtle (tinted) ·
   --danger (outline red). Every button is colorblind-safe because it always carries a word. */
.bt-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--bt-tap); padding:0 18px;
  font-family:var(--bt-font); font-size:var(--bt-fs-14); font-weight:700; line-height:1;
  border:1.5px solid transparent; border-radius:var(--bt-radius-btn);
  background:var(--bt-surface); color:var(--bt-ink);
  cursor:pointer; text-decoration:none; -webkit-tap-highlight-color:transparent;
  transition:filter .15s, background .15s, border-color .15s, transform .05s;
}
.bt-btn:active{ transform:translateY(1px); }
.bt-btn:focus-visible{ outline:3px solid var(--bt-focus); outline-offset:2px; }
.bt-btn:disabled,.bt-btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; }

.bt-btn--primary{ background:var(--bt-brand); border-color:var(--bt-brand); color:var(--bt-on-brand); }
.bt-btn--primary:hover{ background:var(--bt-brand-strong); border-color:var(--bt-brand-strong); }

.bt-btn--secondary{ background:var(--bt-surface); border-color:var(--bt-brand); color:var(--bt-brand); }
.bt-btn--secondary:hover{ background:var(--bt-brand-tint); }

.bt-btn--subtle{ background:var(--bt-surface-2); border-color:var(--bt-line); color:var(--bt-ink); }
.bt-btn--subtle:hover{ background:var(--bt-brand-tint); border-color:var(--bt-brand); }

.bt-btn--ok{ background:var(--bt-surface); border-color:var(--bt-ok); color:var(--bt-ok); }
.bt-btn--ok:hover{ background:var(--bt-ok-tint); }

.bt-btn--danger{ background:var(--bt-surface); border-color:var(--bt-danger); color:var(--bt-danger); }
.bt-btn--danger:hover{ background:var(--bt-danger-tint); }

/* THE CHIP — status = icon + word + color, pill-shaped. Color is NEVER the only signal:
   pass an icon glyph and a word inside every chip (colorblind law). */
.bt-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:var(--bt-radius-pill);
  font-family:var(--bt-font); font-size:var(--bt-fs-12); font-weight:800; letter-spacing:.3px;
  border:1.5px solid; white-space:nowrap;
}
.bt-chip--ok{     color:var(--bt-ok);     border-color:var(--bt-ok);     background:var(--bt-ok-tint); }
.bt-chip--warn{   color:var(--bt-warn);   border-color:var(--bt-warn);   background:var(--bt-warn-tint); }
.bt-chip--danger{ color:var(--bt-danger); border-color:var(--bt-danger); background:var(--bt-danger-tint); font-weight:900; }
.bt-chip--info{   color:var(--bt-info);   border-color:var(--bt-info);   background:var(--bt-info-tint); }
/* Solid variant — a chip that should read as a finished, positive state (e.g. READY TO SEND) */
.bt-chip--ok-solid{ color:var(--bt-on-ok); border-color:var(--bt-ok); background:var(--bt-ok); font-weight:900; }
/* High-contrast: chips become solid fills with a full-weight word + icon */
:root[data-theme="hc"] .bt-chip{ border-width:2px; color:#fff; }
:root[data-theme="hc"] .bt-chip--ok{ background:var(--bt-ok); }
:root[data-theme="hc"] .bt-chip--warn{ background:var(--bt-warn); }
:root[data-theme="hc"] .bt-chip--danger{ background:var(--bt-danger); }
:root[data-theme="hc"] .bt-chip--info{ background:var(--bt-info); }

/* THE CARD — white surface, 14px corners, hairline border, whisper shadow */
.bt-card{
  background:var(--bt-surface); border:1px solid var(--bt-line);
  border-radius:var(--bt-radius); box-shadow:var(--bt-shadow);
  padding:var(--bt-sp-4) var(--bt-sp-5);
}

/* THE FOOTER STAMP — every tile-app, bottom, whisper-gray 12px keep-the-world-honest tag */
.bt-footer-stamp{ color:var(--bt-muted); font-size:var(--bt-fs-12); text-align:center; padding:var(--bt-sp-4) 0; }
