/* xmltv.live — design tokens, adapted from editm3u.com (same brand: SMPTE colour bars,
   graphite UI, orange accent, IBM Plex). Kept as a local copy on purpose so a change
   on one site never breaks the other. Themes: dark, light, sand, mist, dusk. */
:root{
  --bar-1:#c9d62b; --bar-2:#2fc6d6; --bar-3:#3fbf6b;
  --bar-4:#d64bb0; --bar-5:#e0393e; --bar-6:#3a6be0;

  --font-ui:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-data:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --r-sm:4px; --r-md:7px; --r-lg:11px;
  --head-h:52px; --status-h:30px;
  --row-h:54px;
  --tap:0.14s cubic-bezier(.2,.6,.3,1);
}
html[data-theme="dark"]{
  --bg:#0e1113; --panel:#15191c; --raised:#1b2125; --hover:#222a2f;
  --line:#262d33; --line-soft:#1e2429;
  --text:#e6eaec; --muted:#909aa1; --faint:#69737a;
  --accent:#ff9f1c; --accent-ink:#1a1206; --accent-soft:rgba(255,159,28,.13);
  --ok:#3fbf6b; --warn:#e8b33a; --bad:#e0393e;
  --shadow:0 18px 40px -20px rgba(0,0,0,.85);
  --scrim:rgba(6,8,9,.72);
}
html[data-theme="light"]{
  /* Graphite daylight: same stacking as dark (page < panel < raised),
     not paper-white. Grey carries elevation; borders stay secondary. */
  --bg:#eceff1; --panel:#f5f6f7; --raised:#e2e6e9; --hover:#d8dee3;
  --line:#c3ccd2; --line-soft:#d5dce1;
  --text:#161c20; --muted:#4a555d; --faint:#6b767e;
  --accent:#c45e08; --accent-ink:#fff; --accent-soft:rgba(196,94,8,.12);
  --ok:#1c7d45; --warn:#8a5f08; --bad:#b62229;
  --shadow:0 16px 34px -24px rgba(12,20,26,.4);
  --scrim:rgba(210,217,222,.82);
}
html[data-theme="sand"]{
  /* Warm paper. Less blue than white, closer to a printed page. */
  --bg:#f3eee6; --panel:#faf6ef; --raised:#e7dfd2; --hover:#ddd3c3;
  --line:#d0c4b2; --line-soft:#e3d9ca;
  --text:#2c241c; --muted:#6b5c4c; --faint:#7a6b5a;
  --accent:#b86a1a; --accent-ink:#fff; --accent-soft:rgba(184,106,26,.14);
  --ok:#2d7a4a; --warn:#8a5a10; --bad:#a33b32;
  --shadow:0 16px 34px -24px rgba(60,40,20,.38);
  --scrim:rgba(232,224,210,.86);
}
html[data-theme="mist"]{
  /* Soft gray. Dimmer than white, so a long list glares less. */
  --bg:#dfe3e6; --panel:#e7ebed; --raised:#d2d8dc; --hover:#c7ced3;
  --line:#b6c0c6; --line-soft:#ccd3d8;
  --text:#1c2428; --muted:#4e5a61; --faint:#5a666d;
  --accent:#c56a12; --accent-ink:#fff; --accent-soft:rgba(197,106,18,.14);
  --ok:#1d7a46; --warn:#8a620c; --bad:#b3262c;
  --shadow:0 16px 34px -24px rgba(20,30,36,.34);
  --scrim:rgba(198,204,208,.84);
}
html[data-theme="dusk"]{
  /* Warm dim night. Not black, and the type is cream rather than cold white. */
  --bg:#1c1916; --panel:#25211c; --raised:#2e2923; --hover:#38322b;
  --line:#3f382f; --line-soft:#2a251f;
  --text:#e8dfd2; --muted:#a89b8c; --faint:#94897a;
  --accent:#e0a04a; --accent-ink:#1c1408; --accent-soft:rgba(224,160,74,.16);
  --ok:#7dba8a; --warn:#d4b06a; --bad:#e07a72;
  --shadow:0 18px 40px -20px rgba(0,0,0,.72);
  --scrim:rgba(16,13,10,.74);
}

/* guide-specific additions (same in every theme unless overridden) */
:root{
  --live:#ef4444; --live-soft:rgba(239,68,68,.14); --live-line:rgba(239,68,68,.45);
  --topbar:57px;     /* header height (sidebar + grid read it) */
  --chcol:210px;     /* timeline channel column */
  --pph:240px;       /* timeline pixels per hour (JS reads this) */
  --rowh:62px;
}
html[data-theme="dark"],html[data-theme="dusk"]{color-scheme:dark}
html[data-theme="light"],html[data-theme="sand"],html[data-theme="mist"]{color-scheme:light;--live:#d92d2d}