/* SpokenKey v6 — light edition. Loaded after cinematic.css; applies only under html[data-theme="light"].
   Same layout, type, films and motion as the dark stage — the page becomes bright paper, keycaps go back to
   ink-edged white, and the night band turns into a white panel. Orange is still the only accent. */

:root[data-theme="light"] {
  --paper: #f3f4f6;
  --paper-2: #e9ebef;
  --surface: #ffffff;
  --surface-2: #f6f7f9;
  --ink: #0c0f14;
  --ink-2: #474d5b;          /* on --paper ≈ 8.1:1 */
  --line: #dcdfe5;
  --line-strong: #9aa1ae;
  --signal: #ff5b1f;
  --signal-ink: #b23c00;     /* orange text on --paper ≈ 5.6:1 */
  --signal-soft: #ffe7dc;
  --focus: #2457e6;
  --night: #ffffff;          /* the privacy band becomes a bright white panel */
  --night-2: #f6f7f9;
  --night-line: #dcdfe5;
  --on-night: #0c0f14;
  --on-night-2: #474d5b;     /* on white ≈ 8.6:1 */
  --signal-night: #b23c00;   /* on white ≈ 6.1:1 */
  --shadow: 0 1px 0 rgba(12, 15, 20, 0.04), 0 28px 56px -28px rgba(12, 15, 20, 0.22);
  --shadow-lift: 0 1px 0 rgba(12, 15, 20, 0.04), 0 40px 72px -30px rgba(12, 15, 20, 0.3);
  --glow: radial-gradient(60% 55% at 50% 45%, rgba(255, 91, 31, 0.10), rgba(255, 91, 31, 0) 70%);
  color-scheme: light;
}

[data-theme="light"] ::selection { background: rgba(255, 91, 31, 0.25); color: var(--ink); }

/* Header + brand */
[data-theme="light"] .brand-mark rect:first-child { fill: #fff; stroke: #0c0f14; }
[data-theme="light"] .brand-mark path { stroke: #0c0f14; }

/* Keycaps: white caps with an ink edge; the primary is lit orange */
[data-theme="light"] .key { --k-bg: var(--surface); --k-fg: var(--ink); --k-edge: var(--ink); border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
[data-theme="light"] .key:active { box-shadow: 0 1px 0 var(--ink); }
[data-theme="light"] .key-primary { --k-bg: var(--signal); --k-fg: #0c0f14; border-color: var(--ink); box-shadow: 0 3px 0 var(--ink), 0 12px 28px -10px rgba(255, 91, 31, 0.5); }
[data-theme="light"] .key-primary:active { box-shadow: 0 1px 0 var(--ink); }
[data-theme="light"] .key-quiet { border-color: var(--line-strong); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  [data-theme="light"] .key-primary:hover { --k-bg: #ff7038; }
  [data-theme="light"] .key:not(.key-primary):not(.key-quiet):hover { --k-bg: #f7f8fa; }
}
[data-theme="light"] .menu-btn { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--ink) !important; box-shadow: 0 2px 0 var(--ink) !important; }

/* Hero */
[data-theme="light"] .hero h1, [data-theme="light"] .hero h1 em { color: var(--ink); }
[data-theme="light"] .hscene .stagebg { background: radial-gradient(90% 80% at 60% 20%, #ffffff 0%, #eceef2 60%, #dfe2e8 100%); box-shadow: inset 0 0 0 1px rgba(12, 15, 20, 0.06); }

/* SpokenKey's UI back on daylight: soft product shadows instead of screen glow */
[data-theme="light"] [data-app] .win, [data-theme="light"] [data-app] .dest { box-shadow: 0 0 0 1px rgba(28, 38, 33, 0.1), 0 30px 60px -20px rgba(16, 24, 20, 0.35), 0 12px 24px -12px rgba(16, 24, 20, 0.2); }
[data-theme="light"] [data-app] .cuemenu { box-shadow: 0 0 0 1px rgba(28, 38, 33, 0.12), 0 18px 40px -12px rgba(16, 24, 20, 0.35); }
[data-theme="light"] [data-app] .kbd { background: linear-gradient(#d9dbdf, #c9ccd2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 24px 40px -24px rgba(16, 24, 20, 0.45); }
[data-theme="light"] [data-app] .k { background: linear-gradient(#ffffff, #f2f3f5); color: #3b3f45; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 4px 0 #b3b7be, 0 6px 10px rgba(0, 0, 0, 0.14); }
[data-theme="light"] [data-app] .k small { color: #6b7078; }
[data-theme="light"] [data-app] .k.fn { color: #111; }
[data-theme="light"] [data-app] .k.fn::after { box-shadow: 0 0 0 3px var(--signal), 0 0 22px 2px rgba(255, 91, 31, 0.4); }
[data-theme="light"] [data-app] .menubar { background: rgba(255, 255, 255, 0.78); color: var(--a-ink); border-bottom-color: rgba(28, 38, 33, 0.08); }
[data-theme="light"] [data-app] .menubar .cue { color: var(--a-ink); }

/* Films */
[data-theme="light"] .film__head h2 { color: var(--ink); }
[data-theme="light"] .stagebg { background: radial-gradient(90% 85% at 50% 0%, #ffffff 0%, #eceef2 55%, #e1e4ea 100%) !important; box-shadow: inset 0 0 0 1px rgba(12, 15, 20, 0.06) !important; }
[data-theme="light"] .filmcanvas { box-shadow: 0 40px 100px -40px rgba(12, 15, 20, 0.35); }
[data-theme="light"] .chapters button .n { border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); background: var(--surface); color: var(--ink); }
[data-theme="light"] .chapters button[aria-current="step"] { background: var(--surface) !important; box-shadow: 0 0 0 1px var(--line), 0 16px 32px -20px rgba(12, 15, 20, 0.25) !important; }
[data-theme="light"] .chapters button[aria-current="step"] .n { background: var(--signal); color: #0c0f14; border-color: var(--ink); }
[data-theme="light"] .film__bar { background: rgba(12, 15, 20, 0.1) !important; }
/* Modes, offer, FAQ, footer, support/download */
[data-theme="light"] .mode h3,
[data-theme="light"] .section-head h2, [data-theme="light"] .h2, [data-theme="light"] .offer-main h2,
[data-theme="light"] .page-head h1, [data-theme="light"] .release-main h2, [data-theme="light"] .topic h2,
[data-theme="light"] .faq summary, [data-theme="light"] .foot-word { color: var(--ink); }
[data-theme="light"] .band-night .section-head h2, [data-theme="light"] .band-night .h2 { color: var(--on-night); }
[data-theme="light"] .band-night { background: radial-gradient(70% 60% at 20% 0%, rgba(255, 91, 31, 0.08), rgba(255, 91, 31, 0) 70%), var(--night); border-block: 1px solid var(--line); }
[data-theme="light"] .band-night .toggle-off .sw { border-color: var(--line-strong); }
[data-theme="light"] .band-night .toggle-off .sw::after { background: var(--line-strong); }
[data-theme="light"] .faq summary::after { border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); background-color: var(--surface); }
[data-theme="light"] .faq details[open] summary::after { background-color: var(--signal); }
[data-theme="light"] .state-pill.is-ready { border-color: var(--ink); }
[data-theme="light"] .install li::before { border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); background: var(--surface); }
[data-theme="light"] .filter input { border-color: var(--ink); }
[data-theme="light"] .foot-links .is-ph::after { color: var(--ph-ink); }

/* ---------- Theme switch (both themes) ---------- */
.theme-switch {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; padding: 0; cursor: pointer;
  color: var(--ink); background: #1b1f26; border: 1.5px solid #343a45; border-radius: 10px; box-shadow: 0 2px 0 #000;
  transition: transform 120ms var(--ease-out);
}
.theme-switch:active { transform: translateY(1px); }
.theme-switch svg { width: 18px; height: 18px; }
.theme-switch .sun { display: none; }
[data-theme="light"] .theme-switch { background: var(--surface); border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
[data-theme="light"] .theme-switch .moon { display: none; }
[data-theme="light"] .theme-switch .sun { display: block; }
.no-js .theme-switch { display: none; }
@media (max-width: 760px) {
  .theme-switch { width: 44px; height: 44px; order: 1; }
  .menu-btn { order: 2; margin-inline-start: 10px !important; }
  .site-header .wrap > .theme-switch { margin-inline-start: auto; }
  .site-nav { order: 3; }
}
@media (min-width: 761px) {
  .site-header .wrap > .theme-switch { order: 3; }
}