/* Kampe landing — shared light/dark theming.
   Every page already defines the Misan tokens (--bg, --card, --hi, --lime …) in its own :root.
   This file adds two things on top, so a page only needs to link it + the no-flash <script>:
     1. a `--lime-fill` var (bright brand lime) so lime can stay a FILL while `--lime` darkens as TEXT
        in light — the landing sets lime inline as both color: and background:, so this is the only way
        to keep buttons popping while headline/link lime stays legible on paper.
     2. a deliberate LIGHT palette under [data-theme="light"].
   Loaded AFTER each page's inline <style>, so these win. Dark is untouched (=== each page's :root). */

:root{ --lime-fill:var(--lime); }               /* dark: fill == brand lime (no visual change) */

:root[data-theme="light"]{
  --bg:#FAFAF4; --surface:#FFFFFF; --card:#FFFFFF; --elev:#F1F1E9;
  --line:rgba(18,19,15,.11); --line-2:rgba(18,19,15,.20);
  --hi:#141510; --mid:#57594F; --low:#8B8D82;
  --lime:#4C7A00;            /* lime AS TEXT → deep olive-lime, legible on paper */
  --lime-fill:#D5FF18;       /* lime AS FILL → keeps the acid brand pop (dark text on it) */
  --lime-deep:#BCE626; --on-lime:#0A0A0A; --lime-wash:rgba(150,190,0,.16); /* lime-deep is a FILL/hover on the landing → stays bright (dark text on it) */
  --purple:#7A00CC; --purple-lt:#8A00E6; --purple-wash:rgba(138,0,230,.10);
  --pink:#D8007D; --pink-lt:#E00A82; --pink-wash:rgba(224,10,130,.10);
  --positive:#4C7A00; --negative:#D34848;
  --shadow-card:0 1px 2px rgba(20,20,10,.06), 0 10px 26px rgba(20,20,10,.07);
  --shadow-hero:0 6px 16px rgba(20,20,10,.08), 0 24px 60px rgba(20,20,10,.10);
}

/* ---- floating theme control (injected by theme.js) ---- */
#kampe-theme{position:fixed;right:16px;bottom:16px;z-index:9999;display:flex;gap:2px;padding:4px;
  background:var(--card);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow-card)}
#kampe-theme button{width:32px;height:32px;border:0;background:transparent;border-radius:999px;cursor:pointer;
  color:var(--low);display:flex;align-items:center;justify-content:center;transition:background .18s,color .18s}
#kampe-theme button:hover{color:var(--hi)}
#kampe-theme button[aria-pressed="true"]{background:var(--lime-fill);color:var(--on-lime)}
#kampe-theme svg{width:16px;height:16px;display:block}
@media (max-width:600px){#kampe-theme{right:12px;bottom:12px}}