/* Lumen theme layer — "warm illumination".
   LIGHT is the default for everyone; dark is opt-in via the toggle.
   Load AFTER styles.css so these win. Nothing here changes markup or structure.

   Part 1 — theme tokens.
   Part 2 — alias `lum sit`'s legacy names onto those tokens.
   Part 3 — fixed values, the toggle, and the discreet language row.
*/

/* ── Part 1 — tokens ─────────────────────────────────────────────────────── */
:root{
  color-scheme:light;
  /* Light: white paper counterpart of the navy system */
  --bg:#FFFFFF;
  --bg-deep:#F8FAFC;
  --surface:#FFFFFF;
  --surface-2:#F8FAFC;
  --surface-hover:#F1F5F9;
  --surface-featured:#F8FAFC;
  --strong:#0A0E1A;
  --text:#475569;
  --muted:#64748B;
  --line-soft:rgba(10,14,26,.06);
  --line-t:#E2E8F0;
  --line-strong-t:#E2E8F0;
  --line-bright:rgba(10,14,26,.28);
  --glass:rgba(255,255,255,.86);
  /* Cyan darkened to AA on white (#00B4D8 is ~2.4:1 as text) */
  --accent:#007E9C;
  --accent-soft:#0E7C99;
  --accent-2:#6D28D9;
  --accent-3:#7C3AED;
  --accent-wash:rgba(0,126,156,.16);
  --on-accent:#FFFFFF;
  --mesh-a:rgba(0,150,183,.10);
  --mesh-b:rgba(124,58,237,.10);
  --badge-fg:var(--accent);
  --badge-bg:rgba(0,126,156,.10);
  --badge-bd:rgba(0,126,156,.28);
  --shadow:0 8px 35px rgba(10,14,26,.08);
}

[data-theme="dark"]{
  color-scheme:dark;
  /* Dark: deep navy-black, restrained cyan, selective purple */
  --bg:#0A0E1A;
  --bg-deep:#050812;            /* footer + stream player */
  --surface:#1A1F2E;            /* cards */
  --surface-2:#141926;
  --surface-hover:#1F2536;
  --surface-featured:#121827;   /* featured Live card interior */
  --strong:#FFFFFF;
  --text:#94A3B8;
  --muted:#7A8899;
  --line-soft:rgba(255,255,255,.06);
  --line-t:#1F2A40;
  --line-strong-t:#1F2A40;
  --line-bright:rgba(148,163,184,.42);
  --glass:rgba(10,14,26,.85);
  --accent:#00B4D8;
  --accent-soft:#25C8E8;        /* brighter cyan, for text links */
  --accent-2:#7C3AED;
  --accent-3:#A78BFA;           /* soft purple icon accent */
  --accent-wash:rgba(0,180,216,.20);
  --on-accent:#07101B;          /* dark text inside bright buttons */
  --mesh-a:rgba(0,180,216,.14);
  --mesh-b:rgba(124,58,237,.16);
  --badge-fg:var(--accent);
  --badge-bg:rgba(0,180,216,.16);
  --badge-bd:rgba(0,180,216,.35);
  --shadow:0 8px 35px rgba(0,0,0,.45);
}

/* ── Part 2 — legacy aliases. `lum sit`'s stylesheet keeps working ───────── */
:root{
  --navy:var(--bg);
  --navy-deep:var(--bg-deep);
  --navy-lift:var(--surface);
  --ivory:var(--strong);
  --cyan:var(--accent);
  /* Gold is not a separate colour in this language — it IS the amber accent. */
  --gold:var(--accent);
  --highlight:var(--accent);
  --soft:var(--text);
  --line:var(--line-strong-t);
  --ink-soft:var(--muted);

  /* Fixed light values — same in both themes. The hero caption sits on a fixed
     dark scrim, so its text must not flip with the theme. */
  --on-image:#FFFFFF;
  --on-image-dim:rgba(255,255,255,.78);
}

html,body{background:var(--bg);color:var(--strong)}

/* ── Part 3 — toggle + discreet language row ─────────────────────────────── */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;
  border-radius:8px;border:1px solid var(--line-strong-t);background:transparent;color:var(--strong);
  font-size:15px;line-height:1;cursor:pointer;transition:border-color .2s,color .2s}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
.theme-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:700px){.theme-toggle{width:34px;height:34px}}

.lang-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px}
.lang-links a{color:var(--muted);font-size:13px;text-decoration:none;opacity:.85}
.lang-links a:hover,.lang-links a:focus-visible{color:var(--accent);opacity:1;text-decoration:underline}
.lang-links a.is-active{color:var(--accent);font-weight:600;opacity:1}