/* ============================================================================
   Tilfully design tokens — the single source of truth for the visual system.
   Change a value here and it updates everywhere that uses the token.
   Loaded FIRST, before app.css / auth.css / the theme layer.

   BRAND PALETTE (Josh, 2026-07-25 — the Militia creative playbook, page 4):
     Primary   #222223  Pantone Neutral Black C
     Secondary #AB2328  Pantone 7621 C (deep red)
     Tertiary  #54585A  Pantone 425 C (grey)
     Quaternary #F1C400 Pantone 7406 C (gold)
     Quinary   #FFFFFF  Pantone White
   2026-07-26 MONOCHROME DECREE (Josh): mainly black and white on every page
   — night = black ground/white ink/white action buttons, day = white
   ground/black ink/black action buttons. Supersedes the 2026-07-25 gold
   action look (which superseded the 2026-07-12 action blue); red and gold
   stay listed above as the recorded brand palette for when Josh wants them
   back. SEMANTIC status colors (--t-good/warn/bad and the map/stage tokens
   in app.css) stay independent, per the 2026-07-24 map rule: green means
   customers, nothing else. Danger red stays on destructive buttons.
   ========================================================================== */
:root {
  /* ---- brand gradient: near-black -> steel grey -> deep red -> gold ------ */
  --t-grad-0: #101011;   /* near-black */
  --t-grad-1: #222223;   /* brand primary */
  --t-grad-2: #3a3b3d;   /* graphite */
  --t-grad-3: #54585a;   /* brand grey */
  --t-grad-4: #454648;   /* monochrome decree: the red/gold tail is greys now */
  --t-grad-5: #54585a;   /* brand grey */
  --t-grad-6: #6a6e71;   /* lifted grey */
  --t-grad-7: #84888b;   /* soft grey-white */
  --t-gradient: linear-gradient(179deg,
    var(--t-grad-0) 0%, var(--t-grad-1) 24%, var(--t-grad-2) 40%, var(--t-grad-3) 50%,
    var(--t-grad-4) 60%, var(--t-grad-5) 72%, var(--t-grad-6) 86%, var(--t-grad-7) 100%);

  /* ---- greens: SEMANTIC ONLY now (customers/success) — no longer brand --- */
  --t-pine: #14351f;
  --t-forest: #1a5230;
  --t-green: #217a3c;
  --t-leaf: #4c8a2c;

  /* ---- MONOCHROME DECREE (Josh, 2026-07-26: "mainly black and white…
     mainly black on dark mode with white text and on day mode mainly white
     with black text… not too crazy with colors right now, all pages").
     SUPERSEDES the 2026-07-25 gold-action decree. Actions/accents invert
     with the theme: day = black fill, white ink; night = white fill, black
     ink (overridden below under body.night-mode). SEMANTIC status colors
     (--t-good/warn/bad, stage + map tokens) stay untouched — data meaning,
     per the 2026-07-24 map rule. Danger red stays on destructive buttons
     (a safety affordance, not decoration). Gold remains in this file as a
     comment-of-record only; restoring it is a one-block revert. ---------- */
  --t-accent: #222223;
  --t-action: #222223;
  --t-action-hi: #3a3b3d;
  --t-action-ink: #ffffff;
  --t-accent-hi: #3a3b3d;   /* hover */
  --t-accent-dim: #54585a;
  --t-accent-ink: #ffffff;  /* text on a solid black fill */

  /* ---- topographic contour line endpoints (used by the canvas JS too) ---
     monochrome decree: contours are soft white/grey now, both themes ------ */
  --t-line-mint: 245, 245, 244;   /* rgb triple — night contours, soft white */
  --t-line-gold: 132, 136, 139;   /* rgb triple — night contours, brand grey */
  --t-line-sage: 132, 136, 139;   /* rgb triple — day contours (brand grey) */
  --t-line-tan: 34, 34, 35;       /* rgb triple — day contours (brand black) */

  /* ---- day mode: clean white ground, black/grey ink, deep-gold accents --- */
  --t-day-bg-hi: #f7f7f8;
  --t-day-bg-lo: #ebebed;
  --t-day-panel: rgba(255, 255, 255, 0.92);
  --t-day-field: rgba(84, 88, 90, 0.07);
  --t-day-line: rgba(34, 34, 35, 0.14);
  --t-day-line-hi: rgba(34, 34, 35, 0.32);
  --t-day-ink: #222223;           /* brand black text */
  --t-day-muted: #54585a;         /* brand grey */
  --t-day-green: #1c7c3f;         /* semantic green, darkened for light ground */
  --t-accent-day: #222223;        /* monochrome decree: day accent = brand black */
  --t-accent-day-hi: #3a3b3d;

  /* ---- night ground: neutral black/dark-gray (brand primary family) ----- */
  --t-night-bg-hi: #161617;
  --t-night-bg-lo: #0e0e0f;
  --t-night-glass: rgba(16, 16, 17, 0.26);

  /* ---- neutrals ------------------------------------------------------- */
  --t-ink: #222223;         /* brand black, e.g. text on white pill */
  --t-cream: #f5f5f4;       /* off-white text on dark grounds */

  /* ---- glass surfaces (cards/panels over a gradient) ------------------- */
  --t-glass: rgba(255, 255, 255, 0.075);
  --t-glass-2: rgba(255, 255, 255, 0.10);
  --t-glass-line: rgba(255, 255, 255, 0.16);
  --t-glass-line-hi: rgba(255, 255, 255, 0.42);

  /* text on dark/glass grounds */
  --t-on-dark: #f5f5f4;
  --t-on-dark-soft: rgba(245, 245, 244, 0.78);
  --t-on-dark-faint: rgba(245, 245, 244, 0.55);

  /* ---- typography ----------------------------------------------------- */
  --t-serif: "Didot", "Bodoni 72", "Hoefler Text", "Playfair Display", Georgia, "Times New Roman", serif;
  --t-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --t-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  /* ---- radii ---------------------------------------------------------- */
  --t-radius-sm: 10px;
  --t-radius: 14px;
  --t-radius-lg: 20px;
  --t-radius-pill: 999px;

  /* ---- semantic status (kept separate from the brand accent) ---------- */
  --t-good: #4caf6a;
  --t-warn: #e0932e;
  --t-bad: #e5533d;

  /* ---- THE EMERALD (Josh's mobile-overhaul ruling, 2026-08-01): the one
     action green. Retires the lime #4ade80 family — fills take the deep
     emerald with WHITE ink (his ruling: white icon on the darker green);
     text/border accents on dark grounds take the lifted variant so
     contrast holds. Washes are rgba(27, 133, 82, α) — same pigment. ----- */
  --t-emerald: #1b8552;
  --t-emerald-lift: #33a273;

  /* ---- PAPER SKIN (Josh, 2026-07-26: the Vaultis-inspired overhaul —
     "spreadsheet-like… plain and minimum… seamless and clean, no weird text
     box bubbles"). Flat matte surfaces replace glass-over-gradient in the
     app shell; the login screen keeps its contour canvas. Monochrome decree
     still governs: these are greys, semantic status colors stay semantic.
     Day values here; night half overridden under body.night-mode below. -- */
  --p-canvas: #f6f6f5;              /* page ground — flat, no gradient      */
  --p-card: #ffffff;                /* card/panel surface                   */
  --p-card-2: #fafafa;              /* nested / inset surface               */
  --p-hair: #e7e7e5;                /* hairline border                      */
  --p-hair-hi: #d4d4d2;             /* hairline, hover/focus                */
  --p-ink: #1d1d1f;                 /* primary text                         */
  --p-ink-soft: #55555a;            /* secondary text                       */
  --p-ink-faint: #8b8b90;           /* labels, column headers               */
  --p-row-hover: #f4f4f3;           /* table row hover wash                 */
  --p-active: #efefee;              /* active nav/tab wash                  */
  --p-radius: 10px;                 /* paper cards sit tighter than glass   */
  --p-radius-sm: 7px;
  --p-shadow: 0 1px 2px rgba(20, 20, 22, 0.05);
  --p-shadow-float: 0 12px 32px rgba(20, 20, 22, 0.14);  /* popovers/panels */
}

/* ---- MONOCHROME DECREE, night half (Josh, 2026-07-26): white action fill,
   near-black ink — the inverse of day. Loaded first, so the theme layer's
   var() lookups resolve per-theme with no other file changing. ------------- */
body.night-mode {
  --t-accent: #f5f5f4;
  --t-action: #f5f5f4;
  --t-action-hi: #ffffff;
  --t-action-ink: #161617;
  --t-accent-hi: #ffffff;
  --t-accent-dim: #b9b9b6;
  --t-accent-ink: #161617;

  /* paper skin, night half — flat matte dark, same hairline discipline */
  --p-canvas: #131314;
  --p-card: #1b1b1d;
  --p-card-2: #202023;
  --p-hair: rgba(245, 245, 244, 0.10);
  --p-hair-hi: rgba(245, 245, 244, 0.22);
  --p-ink: #f0f0ee;
  --p-ink-soft: rgba(240, 240, 238, 0.72);
  --p-ink-faint: rgba(240, 240, 238, 0.48);
  --p-row-hover: rgba(245, 245, 244, 0.045);
  --p-active: rgba(245, 245, 244, 0.08);
  --p-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --p-shadow-float: 0 12px 32px rgba(0, 0, 0, 0.55);
}