/* ============================================================================
   AHA — light theme.

   Loaded after every other stylesheet. Everything is scoped under
   :root[data-theme="light"], so with no attribute set the site is byte-for-byte
   what it was: removing this one <link> reverts the whole feature.

   The palette is not invented — it's the back-office studio palette, which was
   already designed light. Light mode makes the marketing site and the studio
   one system instead of two.
   ============================================================================ */

:root[data-theme="light"]{
  --bg:#FAF9F6;
  --bg-2:#FFFFFF;
  --bg-3:#F4F2EC;
  --line:#ECE9E2;
  --line-2:#DCD8CF;

  --ink:#17181C;      /* 16.9:1 — was near-white; now near-black */
  --ink-2:#3E3A33;    /* 10.7:1 */
  --ink-3:#5F5B52;    /*  6.4:1 */
  /* --ink-4 carries the 8–10px mono labels. The studio's #8A867D measured
     3.45:1 here, which fails AA for text that small, so it is darkened rather
     than inherited. Contrast beats palette purity on the smallest type. */
  --ink-4:#6B675E;    /*  5.2:1 */

  --accent:#2B57F0;   /* 5.4:1 — brand blue holds on both grounds */
  --accent-2:#1E44C8;
  --accent-bright:#2247D6;  /* 6.8:1 — #7E9BFF is unreadable on paper */

  /* #0E9F6E measured 3.22:1 — fine behind a 36px number, not behind the small
     labels that reuse this token. Darkened until it clears AA everywhere. */
  --positive:#0A7A55; /*  4.9:1 */
  --loss:#C2410C;     /*  4.9:1 */
  --warn:#B45309;

  color-scheme: light;
}

/* ---- surfaces that hardcode rgba() rather than tokens ---- */
:root[data-theme="light"] header{
  background:rgba(250,249,246,.78);
  border-bottom-color:var(--line);
}
:root[data-theme="light"] .glass{
  background:rgba(255,255,255,.76);
  border-color:var(--line);
  box-shadow:0 1px 2px rgba(23,24,28,.04), 0 12px 32px -18px rgba(23,24,28,.18);
}
:root[data-theme="light"] .btn-ghost{
  background:rgba(255,255,255,.7);
  color:var(--ink);
  border-color:var(--line-2);
}
:root[data-theme="light"] .btn-primary{
  box-shadow:0 8px 26px -12px rgba(43,87,240,.55);
}
:root[data-theme="light"] .starter input,
:root[data-theme="light"] .field input,
:root[data-theme="light"] .field select{
  background:#FFFFFF;
  border-color:var(--line-2);
  color:var(--ink);
}
:root[data-theme="light"] .starter input::placeholder{color:var(--ink-4)}

/* the ambient ground used on every page without WebGL */
:root[data-theme="light"] body.no-gl::before{
  background:
    radial-gradient(ellipse 60% 40% at 70% 20%,rgba(43,87,240,.10),transparent 70%),
    radial-gradient(ellipse 50% 35% at 20% 75%,rgba(43,87,240,.07),transparent 70%),
    linear-gradient(var(--bg),#F2F0EA);
}

/* ---- staircase ---- */
:root[data-theme="light"] .step{
  background:linear-gradient(180deg,#FFFFFF,#FAF9F6);
  border-color:var(--line-2);
}
:root[data-theme="light"] .step .you .yl,
:root[data-theme="light"] .step .goal{background:var(--bg-2)}
:root[data-theme="light"] .step.d{border-color:rgba(180,83,9,.35)}
:root[data-theme="light"] .step.c{border-color:var(--accent)}
:root[data-theme="light"] .step.a{border-color:rgba(14,159,110,.4)}

/* ---- rank table ---- */
:root[data-theme="light"] .ranktbl{background:#FFFFFF;border-color:var(--line)}
:root[data-theme="light"] .rr:first-child{background:var(--bg-3)}
:root[data-theme="light"] .rr.you{background:rgba(43,87,240,.09)}

/* ---- score + chips ---- */
:root[data-theme="light"] .bigscore .gr{
  background:rgba(194,65,12,.10);
  border-color:rgba(194,65,12,.42);
}
:root[data-theme="light"] .chipx.low{border-color:rgba(194,65,12,.42)}
:root[data-theme="light"] .selftest{background:rgba(255,255,255,.6)}
:root[data-theme="light"] .delta{background:rgba(255,255,255,.7)}

/* ---- the Contest (mobile) ---- */
:root[data-theme="light"] .contest-m .bar--rival{background:linear-gradient(180deg,#D8D4CB,#C4BFB4)}
:root[data-theme="light"] .contest-m .bonus{
  background:repeating-linear-gradient(-45deg,rgba(14,159,110,.14),rgba(14,159,110,.14) 5px,transparent 5px,transparent 10px);
  border-color:rgba(14,159,110,.5);
}
:root[data-theme="light"] .contest-m .badgewarn{background:rgba(14,159,110,.08)}

/* ---- the toggle itself ---- */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex-shrink:0;
  background:transparent;border:1px solid var(--line-2);border-radius:100px;
  color:var(--ink-3);cursor:pointer;padding:0;
  transition:border-color .16s,color .16s;
}
.theme-toggle:hover{border-color:var(--accent-bright);color:var(--accent-bright)}
.theme-toggle svg{width:15px;height:15px;display:block}
.theme-toggle .sun{display:none}
.theme-toggle .moon{display:block}
:root[data-theme="light"] .theme-toggle .sun{display:block}
:root[data-theme="light"] .theme-toggle .moon{display:none}

/* The header is a 3-column grid; the toggle rides with the CTA on the right. */
.nav-right{display:inline-flex;align-items:center;gap:12px}
.nav:has(nav.links) > .nav-right{justify-self:end}

@media (prefers-reduced-motion: reduce){
  .theme-toggle{transition:none}
}