/* ============================================================================
   Entermodal — theme.css
   The white-label theming layer. Drop into app/static/ and load it BEFORE
   styles.css. Components must read these tokens (var(--token)) and never
   hard-code hex. A tenant re-skins the entire product by overriding ~8 brand
   tokens in a [data-theme="…"] block — nothing else changes.

   Layers:
     1. :root            → Entermodal default theme (dark chrome + light paper)
     2. STATUS palette    → FIXED, never themeable (see lock note below)
     3. [data-theme=…]    → per-tenant overrides (brand + surface only)
     4. [data-mode=dark]  → optional full-dark content surfaces (bonus)
   ========================================================================== */

:root {
  /* ---- BRAND · themeable (a tenant overrides these ~8) -------------------- */
  --brand-primary:        #DA2D29;  /* "Entermodal Red" — refined from #E0322E */
  --brand-primary-hover:  #BE211D;
  --brand-primary-active: #A11A17;
  --brand-on-primary:     #FFFFFF;  /* text/icon ON a brand fill */
  --brand-accent:         #E6A23C;  /* warm gold — sparing highlights only */
  --brand-soft:           #FBE9E7;  /* tinted brand surface (chips, active nav, "Now") */
  --brand-soft-text:      #9A1B17;  /* readable brand text on --brand-soft */
  --brand-soft-border:    #F3C9C5;
  --brand-ring:           rgba(218, 45, 41, .35);  /* focus ring */

  /* ---- SURFACES · themeable ---------------------------------------------- */
  --surface-page:    #F5F6F8;  /* app background behind cards */
  --surface-card:    #FFFFFF;  /* cards, drawers, table bodies */
  --surface-sunken:  #ECEEF1;  /* table header, wells, insets */
  --surface-chrome:  #0E0E10;  /* dark rail + top bar (onyx) */
  --surface-chrome-2:#18181B;  /* raised chrome: hover, submenu, active row */
  --surface-overlay: rgba(14, 14, 16, .55);  /* modal scrim */

  /* ---- TEXT · neutral (kept across themes) ------------------------------- */
  --text-primary:        #16181D;  /* 15.8:1 on card  */
  --text-secondary:      #5A6170;  /*  6.2:1 on card  */
  --text-muted:          #6E7480;  /*  4.8:1 on card  */
  --text-on-chrome:      #F4F5F7;  /* 16.8:1 on onyx  */
  --text-on-chrome-muted:#9AA0AC;  /*  5.3:1 on onyx  */

  /* ---- BORDERS · neutral -------------------------------------------------- */
  --border:        #E5E7EB;
  --border-strong: #D0D4DA;
  --border-chrome: rgba(255, 255, 255, .09);
  --focus-ring:    var(--brand-ring);

  /* ======================================================================
     STATUS PALETTE — LOCKED. NON-THEMEABLE.
     Never override these in a [data-theme] block. Tenants color the brand,
     never the alerts. Each status is ALWAYS paired with an icon + label so
     meaning never rides on color alone — this is also what keeps the brand
     being red from colliding with danger (see notes below).
       success  green  — done / delivered / paid / cleared
       warning  amber  — heads-up / clock running / needs review
       danger   crimson— error / failed / overdue / hold   (cool, ≠ brand red)
       info     blue   — in transit / active / informational
       neutral  gray   — closed / archived / not applicable
     ====================================================================== */
  --status-success:#15803D; --status-success-soft:#E7F4EC; --status-success-border:#BBE6CC;
  --status-warning:#B45309; --status-warning-soft:#FBF0DA; --status-warning-border:#F0D8A8;
  --status-danger: #C0143C; --status-danger-soft: #FCE7EC; --status-danger-border: #F3C2CF;
  --status-info:   #1F6FB2; --status-info-soft:   #E7F1FB; --status-info-border:   #BFDBF0;
  --status-neutral:#5A6170; --status-neutral-soft:#EEF0F3; --status-neutral-border:#DDE1E7;

  /* ---- SHAPE & MOTION ----------------------------------------------------- */
  --radius-sm:6px; --radius:10px; --radius-lg:14px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(16,18,24,.06);
  --shadow:   0 4px 16px rgba(16,18,24,.10);
  --shadow-lg:0 16px 48px rgba(16,18,24,.22);
  --font-sans:"Sora","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}

/* ============================================================================
   EXAMPLE TENANT THEME — "Meridian Freight" (navy + orange)
   Proves the model: ONLY brand + surface-chrome tokens are overridden.
   Neutrals, text, borders, and the entire status palette are inherited
   untouched. Apply with <html data-theme="meridian">.
   ========================================================================== */
[data-theme="meridian"] {
  --brand-primary:        #1E3A8A;  /* navy */
  --brand-primary-hover:  #182F6E;
  --brand-primary-active: #132356;
  --brand-on-primary:     #FFFFFF;
  --brand-accent:         #F97316;  /* orange */
  --brand-soft:           #E8EDF7;
  --brand-soft-text:      #1B3473;
  --brand-soft-border:    #C7D4ED;
  --brand-ring:           rgba(30, 58, 138, .35);
  --surface-chrome:       #0B1B33;  /* deep navy chrome */
  --surface-chrome-2:     #12294A;
  --border-chrome:        rgba(255, 255, 255, .10);
}

/* ============================================================================
   OPTIONAL — full dark content mode (bonus; not required for v1).
   Flips the light "paper" surfaces to dark while keeping the SAME brand +
   status tokens. Stackable with any [data-theme]. <html data-mode="dark">.
   ========================================================================== */
[data-mode="dark"] {
  --surface-page:    #0B0B0D;
  --surface-card:    #161619;
  --surface-sunken:  #1F1F23;
  --surface-chrome:  #161619;   /* chrome melds into content in dark mode */
  --surface-chrome-2:#222227;
  --text-primary:        #F3F4F6;
  --text-secondary:      #B5BAC4;
  --text-muted:          #888E9A;
  --text-on-chrome:      #F3F4F6;
  --text-on-chrome-muted:#888E9A;
  --border:        #2A2B30;
  --border-strong: #3A3C43;
  --border-chrome: rgba(255, 255, 255, .08);
  /* status "soft" tints deepened so they read on dark surfaces */
  --status-success-soft:#10261A; --status-warning-soft:#2A2008;
  --status-danger-soft: #2A0F16; --status-info-soft:   #0E2233;
  --status-neutral-soft:#1F1F23;
  --brand-soft:#2A1614; --brand-soft-text:#F0B9B6; --brand-soft-border:#3A1B19;
}