/*
 * ╔══════════════════════════════════════════════════════╗
 * ║        ETR - THEME / DESIGN TOKENS                  ║
 * ║  Edit THIS file to change colors, fonts, or radius  ║
 * ╚══════════════════════════════════════════════════════╝
 * "Control room" rework (Claude Design, Aug 2026).
 * The tokens below are the dark set; light overrides follow. Which one shows is
 * decided by data-theme on <html>: js/skin.js sets "light" on a first visit
 * (whatever the OS prefers) and "dark" once the person chose it with the top-bar
 * toggle (remembered in the browser as etr_theme). The prefers-color-scheme block
 * only matters when no attribute is set at all.
 * Rules: borders are always visible, text never drops below 4.5:1, signal
 * colours are high-chroma so status reads across a room, numbers are the
 * largest thing on any screen.
 *
 * Typography: Inter (UI) + JetBrains Mono (IDs, plates, timestamps, durations),
 * self-hosted variable fonts - no external font requests.
 */
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-var.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('../fonts/jetbrains-mono-var.woff2') format('woff2');
  font-weight:100 800;
  font-style:normal;
  font-display:swap;
}
:root{
  /* ── dark (default) ── ink: page near-black, panels step up in value */
  --bg:#0A0E13; --bg2:#05080C; --card:#141C25; --card2:#1B2530; --raised:#223040;
  --text:#F4F8FC; --text-2:#C6D3E0; --text-mut:#96A6B8; --text-dim:#7A8B9E; --text-inv:#0A0E13;
  --bd:#2B3947; --bd-strong:#47596B; --bd-faint:#223040;
  --primary:#3D9BFF; --primary-strong:#7FC0FF; --primary-soft:#12314F; --primary-softer:#0E2438; --primary-bd:#2B5E96;
  --head:#0D1620; --head2:#05090E;
  --green:#35D67F; --green-soft:#0C2B1C; --green-bd:#1D5C3A;
  --amber:#FFB13C; --amber-soft:#33230A; --amber-bd:#6B4715;
  --red:#FF5D63;  --red-soft:#37151A;  --red-bd:#75252C;
  --purple:#B98CFF; --purple-soft:#241A3A; --purple-bd:#4A3675;
  --neutral:#A6B6C6; --neutral-soft:#1E2833; --neutral-bd:#3A4A5A;
  --chart1:#3D9BFF; --chart2:#35D67F; --grid:#223040;
  --badge-count:#FFB13C; --on-badge:#12100A;
  --sh-sm:0 1px 2px rgba(0,0,0,.5);
  --sh-md:0 6px 16px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4);
  --sh-lg:0 24px 60px rgba(0,0,0,.7);
  --glow-primary:0 0 0 1px var(--primary-bd),0 0 24px rgba(61,155,255,.18);
  --glow-red:0 0 0 1px #75252C,0 0 24px rgba(255,93,99,.20);
  --glow-amber:0 0 0 1px #6B4715,0 0 24px rgba(255,177,60,.18);
  --glow-green:0 0 0 1px #1D5C3A,0 0 24px rgba(53,214,127,.16);
  --scrim:rgba(3,6,10,.72);

  /* ── shape ── radii step up so panels read as panels at a distance; tags stay near-square */
  --r:4px; --r-md:8px; --r-lg:12px; --r-xl:16px;
  /* ── type ── */
  --font:'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono','Cascadia Code','Consolas',monospace;
  --fs-hero:52px; --fs-kpi:36px; --fs-pipe:21px; --fs-page-title:21px; --fs-card-title:15px;
  --fs-body:15px; --fs-body-sm:14px; --fs-sub:13px; --fs-meta:12.5px; --fs-label:12px; --fs-eyebrow:11.5px; --fs-micro:11px;
  /* ── shell ── */
  --topbar-h:64px; --side-w:236px; --side-w-collapsed:62px;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#EDF1F5; --bg2:#E1E7ED; --card:#FFFFFF; --card2:#F4F7FA; --raised:#FFFFFF;
    --text:#0E1620; --text-2:#2C3947; --text-mut:#4E5D6E; --text-dim:#6B7C8F; --text-inv:#FFFFFF;
    --bd:#C3CEDA; --bd-strong:#94A5B7; --bd-faint:#D8E0E8;
    --primary:#0F5FB5; --primary-strong:#0A4482; --primary-soft:#D8E9FB; --primary-softer:#EDF5FD; --primary-bd:#9CC4EC;
    --head:#0D2C4A; --head2:#06182B;
    --green:#0F6B2B; --green-soft:#D6F0DE; --green-bd:#8CC79E;
    --amber:#7A4506; --amber-soft:#FBEBCE; --amber-bd:#D9B678;
    --red:#93171F;  --red-soft:#FBDDE0;  --red-bd:#DC8E95;
    --purple:#4A1F7D; --purple-soft:#E7DBF5; --purple-bd:#BB9CDE;
    --neutral:#3D4A58; --neutral-soft:#E4E9EF; --neutral-bd:#B6C2CE;
    --chart1:#0F5FB5; --chart2:#0F6B2B; --grid:#D8E0E8;
    --badge-count:#B26A00; --on-badge:#FFFFFF;
    --sh-sm:0 1px 2px rgba(14,22,32,.10),0 1px 3px rgba(14,22,32,.10);
    --sh-md:0 6px 16px rgba(14,22,32,.12),0 1px 3px rgba(14,22,32,.08);
    --sh-lg:0 24px 60px rgba(14,22,32,.22);
    --glow-primary:0 0 0 1px #9CC4EC,0 0 24px rgba(15,95,181,.14);
    --glow-red:0 0 0 1px #DC8E95,0 0 24px rgba(147,23,31,.14);
    --glow-amber:0 0 0 1px #D9B678,0 0 24px rgba(122,69,6,.14);
    --glow-green:0 0 0 1px #8CC79E,0 0 24px rgba(15,107,43,.14);
    --scrim:rgba(8,14,20,.55);
  }
}
:root[data-theme="light"]{
  --bg:#EDF1F5; --bg2:#E1E7ED; --card:#FFFFFF; --card2:#F4F7FA; --raised:#FFFFFF;
  --text:#0E1620; --text-2:#2C3947; --text-mut:#4E5D6E; --text-dim:#6B7C8F; --text-inv:#FFFFFF;
  --bd:#C3CEDA; --bd-strong:#94A5B7; --bd-faint:#D8E0E8;
  --primary:#0F5FB5; --primary-strong:#0A4482; --primary-soft:#D8E9FB; --primary-softer:#EDF5FD; --primary-bd:#9CC4EC;
  --head:#0D2C4A; --head2:#06182B;
  --green:#0F6B2B; --green-soft:#D6F0DE; --green-bd:#8CC79E;
  --amber:#7A4506; --amber-soft:#FBEBCE; --amber-bd:#D9B678;
  --red:#93171F;  --red-soft:#FBDDE0;  --red-bd:#DC8E95;
  --purple:#4A1F7D; --purple-soft:#E7DBF5; --purple-bd:#BB9CDE;
  --neutral:#3D4A58; --neutral-soft:#E4E9EF; --neutral-bd:#B6C2CE;
  --chart1:#0F5FB5; --chart2:#0F6B2B; --grid:#D8E0E8;
  --badge-count:#B26A00; --on-badge:#FFFFFF;
  --sh-sm:0 1px 2px rgba(14,22,32,.10),0 1px 3px rgba(14,22,32,.10);
  --sh-md:0 6px 16px rgba(14,22,32,.12),0 1px 3px rgba(14,22,32,.08);
  --sh-lg:0 24px 60px rgba(14,22,32,.22);
  --glow-primary:0 0 0 1px #9CC4EC,0 0 24px rgba(15,95,181,.14);
  --glow-red:0 0 0 1px #DC8E95,0 0 24px rgba(147,23,31,.14);
  --glow-amber:0 0 0 1px #D9B678,0 0 24px rgba(122,69,6,.14);
  --glow-green:0 0 0 1px #8CC79E,0 0 24px rgba(15,107,43,.14);
  --scrim:rgba(8,14,20,.55);
}
:root[data-theme="dark"]{
  --bg:#0A0E13; --bg2:#05080C; --card:#141C25; --card2:#1B2530; --raised:#223040;
  --text:#F4F8FC; --text-2:#C6D3E0; --text-mut:#96A6B8; --text-dim:#7A8B9E; --text-inv:#0A0E13;
  --bd:#2B3947; --bd-strong:#47596B; --bd-faint:#223040;
  --primary:#3D9BFF; --primary-strong:#7FC0FF; --primary-soft:#12314F; --primary-softer:#0E2438; --primary-bd:#2B5E96;
  --head:#0D1620; --head2:#05090E;
  --green:#35D67F; --green-soft:#0C2B1C; --green-bd:#1D5C3A;
  --amber:#FFB13C; --amber-soft:#33230A; --amber-bd:#6B4715;
  --red:#FF5D63;  --red-soft:#37151A;  --red-bd:#75252C;
  --purple:#B98CFF; --purple-soft:#241A3A; --purple-bd:#4A3675;
  --neutral:#A6B6C6; --neutral-soft:#1E2833; --neutral-bd:#3A4A5A;
  --chart1:#3D9BFF; --chart2:#35D67F; --grid:#223040;
  --badge-count:#FFB13C; --on-badge:#12100A;
  --sh-sm:0 1px 2px rgba(0,0,0,.5);
  --sh-md:0 6px 16px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4);
  --sh-lg:0 24px 60px rgba(0,0,0,.7);
  --glow-primary:0 0 0 1px var(--primary-bd),0 0 24px rgba(61,155,255,.18);
  --glow-red:0 0 0 1px #75252C,0 0 24px rgba(255,93,99,.20);
  --glow-amber:0 0 0 1px #6B4715,0 0 24px rgba(255,177,60,.18);
  --glow-green:0 0 0 1px #1D5C3A,0 0 24px rgba(53,214,127,.16);
  --scrim:rgba(3,6,10,.72);
}