/* ==========================================================================
   Colour themes for editorial pages (Home, Contact, Playground, 404).
   site-modes.js sets <html data-kb-theme="cartridge|last-hour|root">; the
   default purple theme has no attribute. Themes only swap colours, so they
   combine freely with the Normal / Pixel / ASCII view modes.
   Load after page CSS and site-layout.css, right before site-modes.css.
   Card art (cover videos, .pg-art) is never recoloured.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Palettes. Every theme redefines the shared tokens, plus two of its own:
      --kb-on-accent (text on accent fills) and --kb-accent-hover.
   -------------------------------------------------------------------------- */
:root {
  --kb-on-accent:#062a24;
  --kb-accent-hover:#7ff0dc;
}

/* Cartridge: a pocket console's pale green screen, four greens and nothing else */
:root[data-kb-theme="cartridge"] {
  --kb-bg:#c4cf8e;
  --kb-fg:#0f380f;
  --kb-purple:#0f380f;
  --kb-accent:#0f380f;
  --kb-muted:#2f5a30;
  --kb-secondary:#26502a;
  --kb-rule:rgba(15,56,15,.42);
  --kb-rule-soft:rgba(15,56,15,.26);
  --kb-surface:#b2c179;
  --kb-surface-hover:#a3b46a;
  --kb-border:rgba(15,56,15,.3);
  --kb-error:#7a1a0c;
  --kb-control-border:rgba(15,56,15,.55);
  --kb-control-active:#98ab5c;
  --kb-on-accent:#c4cf8e;
  --kb-accent-hover:#306230;
  --kb-page-background:
    radial-gradient(ellipse 90% 55% at 18% 0%,rgba(255,255,236,.32),transparent 70%),
    repeating-linear-gradient(0deg,rgba(15,56,15,.045) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(15,56,15,.045) 0 1px,transparent 1px 3px),
    var(--kb-bg);
  --kb-page-ambient:radial-gradient(ellipse 120% 60% at 50% 120%,rgba(48,98,48,.16),transparent 70%);
  color-scheme:light;
}

/* Last Hour: deep night, bone-white text and blood red, waiting for first light */
:root[data-kb-theme="last-hour"] {
  --kb-bg:#07070c;
  --kb-fg:#efe9e1;
  --kb-purple:#ff4a4f;
  --kb-accent:#c41e2c;
  --kb-muted:#857f87;
  --kb-secondary:#b4ada6;
  --kb-rule:rgba(255,74,79,.34);
  --kb-rule-soft:rgba(239,233,225,.16);
  --kb-surface:#14121b;
  --kb-surface-hover:#211b26;
  --kb-border:rgba(239,233,225,.12);
  --kb-error:#ff4a4f;
  --kb-control-border:#3a2a33;
  --kb-control-active:#3a141b;
  --kb-on-accent:#fff6ee;
  --kb-accent-hover:#9e1622;
  --kb-page-background:
    radial-gradient(ellipse 110% 46% at 50% 108%,rgba(196,30,44,.24),transparent 72%),
    radial-gradient(ellipse 70% 42% at 8% 0%,rgba(70,48,96,.22),transparent 76%),
    var(--kb-bg);
  --kb-page-ambient:radial-gradient(ellipse 60% 34% at 92% 46%,rgba(196,30,44,.07),transparent 80%);
}

/* Root: green phosphor on black, with faint scanlines */
:root[data-kb-theme="root"] {
  --kb-bg:#020a05;
  --kb-fg:#d2ffdc;
  --kb-purple:#39ff6a;
  --kb-accent:#39ff6a;
  --kb-muted:#5c9a6c;
  --kb-secondary:#8fd6a0;
  --kb-rule:rgba(57,255,106,.32);
  --kb-rule-soft:rgba(57,255,106,.16);
  --kb-surface:#081a0e;
  --kb-surface-hover:#0e2a17;
  --kb-border:rgba(57,255,106,.18);
  --kb-error:#ff5d67;
  --kb-control-border:#1d4a2a;
  --kb-control-active:#0f3a1d;
  --kb-on-accent:#021006;
  --kb-accent-hover:#8dffaa;
  --kb-page-background:
    repeating-linear-gradient(0deg,rgba(57,255,106,.035) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse 85% 48% at 14% 10%,rgba(57,255,106,.10),transparent 78%),
    var(--kb-bg);
  --kb-page-ambient:radial-gradient(ellipse 70% 40% at 96% 60%,rgba(57,255,106,.05),transparent 85%);
}

/* --------------------------------------------------------------------------
   2. Page colours that were written as literals in style.css and
      playground.css now follow the tokens whenever a theme is on.
   -------------------------------------------------------------------------- */
:root[data-kb-theme] body:has(.site-layout),
:root[data-kb-theme] .editorial-page,
:root[data-kb-theme] .site-layout { color:var(--kb-fg); }
:root[data-kb-theme] .site-top .site-back:hover,
:root[data-kb-theme] .site-back.site-back:hover { color:var(--kb-fg); }
:root[data-kb-theme] .editorial-page .bio,
:root[data-kb-theme] .contact-page #thank-you p { color:var(--kb-secondary); }
:root[data-kb-theme] .home-page.editorial-page .profile-hero .value-statement { color:var(--kb-fg); }
:root[data-kb-theme] ::selection { background:var(--kb-accent); color:var(--kb-on-accent); }

/* Home and 404 link list */
:root[data-kb-theme] .home-page.editorial-page .elsewhere > a.link-button {
  color:var(--kb-fg); border-color:var(--kb-rule);
}
:root[data-kb-theme] .home-page.editorial-page .elsewhere > a.link-button:first-of-type { border-top-color:var(--kb-rule); }
:root[data-kb-theme] .home-page.editorial-page .elsewhere > a.link-button:is(:hover,:focus-visible) {
  background:color-mix(in srgb,var(--kb-purple) 12%,transparent); border-bottom-color:var(--kb-purple);
}
:root[data-kb-theme] .home-page.editorial-page .elsewhere .editorial-number { color:var(--kb-muted); }

/* Say Hello form */
:root[data-kb-theme] .contact-page.editorial-page #contact-form :is(input,textarea) {
  color:var(--kb-fg); border-bottom-color:var(--kb-rule);
}
:root[data-kb-theme] .contact-page.editorial-page #contact-form :is(input,textarea)::placeholder { color:var(--kb-muted); }
:root[data-kb-theme] .contact-page.editorial-page #contact-form :is(input,textarea):focus { border-bottom-color:var(--kb-purple); }
:root[data-kb-theme] .contact-page.editorial-page #contact-form .input-error { border-bottom-color:var(--kb-error) !important; background:transparent; }
:root[data-kb-theme] .contact-page .error-message { color:var(--kb-error); }
:root[data-kb-theme]:not([data-kb-mode="ascii"]) .contact-page.editorial-page #contact-form button.link-button { background:var(--kb-accent); color:var(--kb-on-accent); }
:root[data-kb-theme]:not([data-kb-mode="ascii"]) .contact-page.editorial-page #contact-form button.link-button:hover { background:var(--kb-accent-hover); }

/* Playground: card chrome follows the theme, the art inside does not */
:root[data-kb-theme] .playground-gallery .pg-description,
:root[data-kb-theme] .playground-gallery .pg-card p { color:var(--kb-secondary); }
:root[data-kb-theme] .playground-gallery .pg-card,
:root[data-kb-theme] .playground-gallery :is(.pg-card--game,.pg-card--vigil) {
  border-color:var(--kb-border); background:var(--kb-surface);
}
:root[data-kb-theme] .playground-gallery .pg-card:is(:hover,:focus-visible),
:root[data-kb-theme] .playground-gallery :is(.pg-card--game,.pg-card--vigil):is(:hover,:focus-visible) {
  border-color:var(--kb-purple); box-shadow:0 10px 30px -14px color-mix(in srgb,var(--kb-purple) 55%,transparent);
}
:root[data-kb-theme]:not([data-kb-mode="ascii"]) .playground-gallery .pg-tag { color:var(--kb-purple); border-color:var(--kb-rule); }
:root[data-kb-theme] .playground-gallery :is(.pg-free,.pg-card--vigil .pg-free) { color:var(--kb-purple); }
:root[data-kb-theme]:not([data-kb-mode="ascii"]) .playground-gallery :is(.pg-chips li,.pg-card--vigil .pg-chips li) {
  color:var(--kb-secondary); background:transparent; border-color:var(--kb-rule);
}
:root[data-kb-theme]:not([data-kb-mode="ascii"]) .playground-gallery :is(.pg-cta,.pg-card--vigil .pg-cta) { background:var(--kb-accent); color:var(--kb-on-accent); }
:root[data-kb-theme]:not([data-kb-mode="ascii"]) .playground-gallery .pg-card:hover :is(.pg-cta,.pg-card--vigil .pg-cta),
:root[data-kb-theme]:not([data-kb-mode="ascii"]) .playground-gallery .pg-card--game:hover .pg-cta { background:var(--kb-accent-hover); }
/* Labels and buttons that sit on top of the art are UI, so they take the theme too.
   ASCII draws these as bracketed text, so the filled versions skip that mode. */
:root[data-kb-theme]:not([data-kb-mode="ascii"]) .playground-gallery :is(.pg-badge,.pg-card--vigil .pg-badge) { background:var(--kb-accent); color:var(--kb-on-accent); }
:root[data-kb-theme] .playground-gallery :is(.pg-badge i,.pg-card--vigil .pg-badge i) { background:var(--kb-on-accent); }
:root[data-kb-theme]:not([data-kb-mode="ascii"]) .playground-gallery :is(.pg-play,.pg-card--vigil .pg-play) {
  background:var(--kb-accent); color:var(--kb-on-accent); box-shadow:0 0 0 6px color-mix(in srgb,var(--kb-accent) 22%,transparent);
}
:root[data-kb-theme]:not([data-kb-mode="ascii"]) .playground-gallery .pg-art-label,
:root[data-kb-theme]:not([data-kb-mode="ascii"]) .playground-gallery .pg-scan .pg-art-label { background:var(--kb-bg); color:var(--kb-fg); border-color:var(--kb-rule); }

/* --------------------------------------------------------------------------
   3. Theme swatches in the VIEW menu
   -------------------------------------------------------------------------- */
.kb-theme-swatch {
  position:relative; overflow:hidden;
  background:var(--sw-bg) !important; border-color:color-mix(in srgb,var(--sw-fg) 40%,transparent) !important;
}
.kb-theme-swatch::before,
.kb-theme-swatch::after { content:""; position:absolute; left:5px; height:3px; border-radius:2px; }
.kb-theme-swatch::before { top:8px; width:16px; background:var(--sw-fg); }
.kb-theme-swatch::after { top:15px; width:10px; background:var(--sw-ac); }
.kb-mode-switch__dot {
  width:8px; height:8px; flex:none; border-radius:50%;
  background:var(--kb-purple); box-shadow:0 0 0 1px var(--kb-control-border);
}