/* ============================================================
   theme.css — MASTER control file for the Endothermal site.
   Every color and font lives here. index.html only references
   these tokens via var(--token); change a value here and it
   propagates everywhere. Two themes: dark (default) + light.
   ============================================================ */

/* ---------- local font: Matrix Sans Video (wordmarks) ---------- */
@font-face{
  font-family:'Matrix Sans Video';
  font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/MatrixSansVideo-Regular.woff2') format('woff2'),
      url('fonts/MatrixSansVideo-Regular.ttf') format('truetype');
}

/* ============================ DARK (default) ============================ */
:root{
  /* —— fonts —— */
  --display:'Matrix Sans Video',ui-monospace,monospace;   /* all wordmarks */
  --mono:'IBM Plex Mono',ui-monospace,'Courier New',monospace;

  /* —— surfaces / text —— */
  --bg:#050507; --bg1:#0b0b10; --bg2:#101018; --dim:#1c1c26;
  --fg:#c9c9d4; --mute:#6a6a78;

  /* —— accents —— */
  --accent:#ff8c33; --amber:#ffb01f; --ember:#ff8c33; --teal:#27c5a6; --cool:#6f8bff;
  --halo:200,216,255;                       /* cmd-palette glow (rgb triplet) */

  /* —— fixed brand constants (identical in both themes) —— */
  --btn:#ff8c33;        /* action-button fill (send / run / start) */
  --btn-text:#0a0608;   /* action-button text */
  --beige:#ece3cd;      /* main beige */
  --ink:#211c12;        /* dark ink */
  --chrome:#0b0b10;     /* dark window-chrome fill (theme toggle) */

  /* —— derived roles (theme-aware) —— */
  --hov:var(--beige); --hovtext:var(--ink); /* button-highlight fill */
  --wordmark:var(--beige);                  /* hero/brand wordmark color */
  --status-text:#0a0608;                    /* text on the accent status/bars */

  /* —— accents used in the tagline + button focus rings —— */
  --hl-warm:#ff8c1c; --hl-cool:#6f8bff;
  --ring1:#ffd23f; --ring2:#2ecc71; --ring3:#6f8bff;

  /* —— window-chrome traffic lights (bright in both themes) —— */
  --tl1:#ff7a2f; --tl2:#ffb01f; --tl3:#27c5a6;

  /* —— layout —— */
  --rail:232px; --bar:30px; --status:26px;
}

/* ============================ LIGHT ============================ */
:root[data-theme="light"]{
  --bg:#ece3cd; --bg1:#f4ecd7; --bg2:#faf5e9; --dim:#cdbf9f;
  --fg:#211c12; --mute:#7a6f59; --halo:224,112,31;
  --accent:#c2571a; --amber:#b07d12; --ember:#c2571a; --cool:#3f5fd6;

  --hov:var(--ink); --hovtext:var(--beige);  /* light keeps the dark fill */
  --wordmark:var(--ink);                      /* dark wordmark, not blue */
  --status-text:#fff7ea;
}