/* ============================================================
   OTS Console — Design Tokens  ("Terminal" / Direction A)
   Framework-agnostic CSS custom properties.

   Theming model:
     • :root                       → light values (default)
     • @media (prefers-color-scheme:dark)  → dark values
     • :root[data-theme="light|dark"]      → explicit override (wins both ways)
   Style every component THROUGH these tokens, never with raw hex.
   ============================================================ */

:root{
  /* neutrals — warm-biased toward the oxblood accent, never cold grey */
  --bg:#F4F0ED;          /* app canvas            */
  --bg-grain:#EEE8E4;    /* terminal / code wells */
  --elev:#FBF9F7;        /* elevated rails        */
  --surface:#FFFFFF;     /* cards                 */
  --surface-2:#F6F0EC;   /* sunken inputs/chips   */
  --border:#E5DCD6;      /* default hairline      */
  --border-strong:#D6C8C0;
  --line:#EDE5E0;        /* faint row separators  */
  --text:#241C18;
  --dim:#6B5F58;         /* secondary text        */
  --faint:#9C8E86;       /* labels / captions     */

  /* brand accent — OTS oxblood (single accent, used sparingly) */
  --accent:#7A1F17;
  --accent-2:#641E16;    /* logo true color / hover */
  --accent-ghost:rgba(122,31,23,.09);
  --on-accent:#FBEEEA;

  /* semantic state — SEPARATE from the accent, never used as decoration */
  --good:#1E8A5A;  --good-bg:rgba(30,138,90,.12);
  --warn:#B5791A;  --warn-bg:rgba(181,121,26,.13);
  --down:#C24138;  --down-bg:rgba(194,65,56,.11);   /* brighter/oranger than accent so alerts read distinct */
  --info:#2F6F9E;  --info-bg:rgba(47,111,158,.11);

  --shadow:0 1px 2px rgba(60,30,20,.05), 0 10px 28px -14px rgba(60,30,20,.22);
  --shadow-lg:0 24px 60px -24px rgba(50,20,14,.4);

  --logo-fill:#641E16;   /* fill for the logo mask (see design-system.md) */
  --radius:12px; --radius-sm:9px;

  /* type — system stacks only (CSP-safe, offline-safe, no webfont fallback risk) */
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Helvetica Neue",sans-serif;
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#141110; --bg-grain:#181413; --elev:#1C1714; --surface:#201A17; --surface-2:#262019;
    --border:#332B26; --border-strong:#41352E; --line:#2A231F;
    --text:#EEE6E1; --dim:#A99B92; --faint:#6F645D;
    --accent:#B23A2C; --accent-2:#8A2A20; --accent-ghost:rgba(178,58,44,.15); --on-accent:#FCEEEA;
    --good:#4CB782; --good-bg:rgba(76,183,130,.15);
    --warn:#E0A340; --warn-bg:rgba(224,163,64,.15);
    --down:#E0645C; --down-bg:rgba(224,100,92,.15);
    --info:#78ABD0; --info-bg:rgba(120,171,208,.15);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 34px -16px rgba(0,0,0,.7);
    --shadow-lg:0 30px 70px -28px rgba(0,0,0,.8);
    --logo-fill:#C6483A;   /* brightened oxblood so the mark stays legible on near-black */
  }
}

:root[data-theme="light"]{
  --bg:#F4F0ED; --bg-grain:#EEE8E4; --elev:#FBF9F7; --surface:#FFFFFF; --surface-2:#F6F0EC;
  --border:#E5DCD6; --border-strong:#D6C8C0; --line:#EDE5E0;
  --text:#241C18; --dim:#6B5F58; --faint:#9C8E86;
  --accent:#7A1F17; --accent-2:#641E16; --accent-ghost:rgba(122,31,23,.09); --on-accent:#FBEEEA;
  --good:#1E8A5A; --good-bg:rgba(30,138,90,.12);
  --warn:#B5791A; --warn-bg:rgba(181,121,26,.13);
  --down:#C24138; --down-bg:rgba(194,65,56,.11);
  --info:#2F6F9E; --info-bg:rgba(47,111,158,.11);
  --shadow:0 1px 2px rgba(60,30,20,.05), 0 10px 28px -14px rgba(60,30,20,.22);
  --shadow-lg:0 24px 60px -24px rgba(50,20,14,.4);
  --logo-fill:#641E16;
}

:root[data-theme="dark"]{
  --bg:#141110; --bg-grain:#181413; --elev:#1C1714; --surface:#201A17; --surface-2:#262019;
  --border:#332B26; --border-strong:#41352E; --line:#2A231F;
  --text:#EEE6E1; --dim:#A99B92; --faint:#6F645D;
  --accent:#B23A2C; --accent-2:#8A2A20; --accent-ghost:rgba(178,58,44,.15); --on-accent:#FCEEEA;
  --good:#4CB782; --good-bg:rgba(76,183,130,.15);
  --warn:#E0A340; --warn-bg:rgba(224,163,64,.15);
  --down:#E0645C; --down-bg:rgba(224,100,92,.15);
  --info:#78ABD0; --info-bg:rgba(120,171,208,.15);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 34px -16px rgba(0,0,0,.7);
  --shadow-lg:0 30px 70px -28px rgba(0,0,0,.8);
  --logo-fill:#C6483A;
}

/* ---- theme-aware brand mark ----
   The OTS logo is single-color-on-transparent, so drive it as a MASK and
   fill with a token. This keeps it legible on both grounds (dark maroon on
   near-black would otherwise vanish). */
.logo{
  -webkit-mask:var(--logo-uri) center/contain no-repeat;
          mask:var(--logo-uri) center/contain no-repeat;
  background:var(--logo-fill);
  display:inline-block;
}