/* Outrun Noir: light theme + theme toggle for the marketing pages. Load after noir-landing / noir-pages / noir-pricing.
   Light = cream paper, ink type, the same single orange. Palette matches the docs' light theme exactly.
   Code and console panels stay dark (as in the docs); the censor and redaction bars stay black in both themes. */

/* ---------- toggle ---------- */
.theme-tg{display:inline-grid;place-items:center;width:38px;height:38px;flex:none;padding:0;border:1px solid var(--line-2);background:none;color:var(--cream-2);cursor:pointer;transition:color .2s,border-color .2s,background-color .2s}
.theme-tg:hover{color:var(--cream);border-color:var(--cream-3)}
.theme-tg:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.theme-tg .ic svg{display:block;width:17px;height:17px}
.theme-tg.tg-menu{display:none}
@media (max-width:860px){
  .theme-tg.tg-bar{display:none}
  .top.open .nav .theme-tg.tg-menu{display:flex;align-items:center;gap:12px;width:100%;height:auto;padding:14px 0;border:0;border-bottom:1px solid var(--line);font:400 17px/1.3 var(--sans);color:var(--cream-2);text-align:left}
  .top.open .nav .theme-tg.tg-menu:hover{color:var(--cream)}
}
html.theme-anim body,html.theme-anim body *:not(img):not(svg *){transition:background-color .35s ease,color .35s ease,border-color .35s ease!important}

/* ---------- light tokens ---------- */
html[data-theme=light]{
  color-scheme:light;scrollbar-color:#cfccc3 #F5F3EE;
  --ink:#F5F3EE;--ink-2:#EDEAE3;--ink-3:#E5E1D8;
  --cream:#0A0A0A;--cream-2:rgba(10,10,10,.70);--cream-3:rgba(10,10,10,.60);
  --line:rgba(10,10,10,.12);--line-2:rgba(10,10,10,.22);
}

/* panels that stay dark in both themes: code samples, the console, the INTENT window keeps paper look via tokens */
html[data-theme=light] .code,html[data-theme=light] body.pg .bezel{
  --ink:#0A0A0A;--ink-2:#111110;--ink-3:#171716;
  --cream:#F5F3EE;--cream-2:rgba(245,243,238,.66);--cream-3:rgba(245,243,238,.56);
  --line:rgba(245,243,238,.12);--line-2:rgba(245,243,238,.22);
  background:#0F0F0E;color:#F5F3EE;color-scheme:dark;
}

/* ink text on orange stays ink; the primary button's hover wipe is ink, so its text turns cream */
html[data-theme=light] ::selection{background:#FF5500;color:#0A0A0A}
html[data-theme=light] .btn.primary{color:#0A0A0A}
html[data-theme=light] .btn.primary:hover{color:#F5F3EE}
html[data-theme=light] body.pg .fam-guide:hover{color:#0A0A0A}
html[data-theme=light] body.pg .next-cta a{color:#0A0A0A!important}
html[data-theme=light] body.pg .next-cta a:hover{background:#0A0A0A;border-color:#0A0A0A;color:#F5F3EE!important}
html[data-theme=light] body.pg .next-cta a:hover span{color:rgba(245,243,238,.7)}
html[data-theme=light] body.pg main .chip[aria-pressed=true] .c{color:rgba(245,243,238,.62)}

/* black bars are black in both themes */
html[data-theme=light] .mind .censor,html[data-theme=light] body.pg .rbar::before{background:#0A0A0A}

/* header, announcement, sticky filter */
html[data-theme=light] .top.solid{background:rgba(245,243,238,.86)}
html[data-theme=light] .announce{background:linear-gradient(90deg,#FBEDE3,#FDF3EB 50%,#FBEDE3);border-bottom-color:#EBD5C4}
html[data-theme=light] .announce a{color:#B93A08;text-decoration-color:rgba(185,58,8,.4)}
html[data-theme=light] .announce a:hover{color:#0A0A0A}
html[data-theme=light] body.pg .filter{background:rgba(245,243,238,.92)}

/* hover washes and hairline-ish fills that were cream-on-ink */
html[data-theme=light] .prices tbody tr:hover,
html[data-theme=light] body.pg .mcard:hover,
html[data-theme=light] body.pg .lineup li:hover,
html[data-theme=light] body.pg .pt tbody tr:hover,
html[data-theme=light] body.pg .choose>li:hover{background:rgba(10,10,10,.03)}
html[data-theme=light] body.pg main code{background:rgba(10,10,10,.05)}

/* form fields (pricing calculator, catalog search) */
html[data-theme=light] body.pg .search input,html[data-theme=light] body.pg .fld input,html[data-theme=light] body.pg .fld select{background-color:#FBFAF7}
html[data-theme=light] body.pg .fld input[aria-invalid=true]{border-color:#B93A08}

/* Orange text on cream: brand #FF5500 is only 2.9:1, so text uses deeper shades of the same hue.
   Display sizes (>= 24px) use #E04A00 (3.7:1, AA large); small text uses #B93A08 (5.2:1, AA).
   Orange fills, borders, lines and icons stay brand orange. Found with work/orange_audit.py. */
html[data-theme=light] :is(.dot,.credit b,body.pg .ph-credit .amt,body.pg .save-big b,body.pg .coin-tag b,body.pg .t-pct b,body.pg .band-num b){color:#E04A00}
html[data-theme=light] :is(.tlink .arr,.lk-note.hot,td .tag,.step .n,.mind .note.n1,
  body.pg .fam-guide,body.pg .ch-id,body.pg .tag-u,body.pg .bt-k,body.pg li .n,body.pg .tc-k,body.pg .t-pct,body.pg .d b,body.pg .calc-out .vs,body.pg .fl-n){color:#B93A08}
html[data-theme=light] body.pg .fam-guide{border-color:rgba(185,58,8,.45)}
html[data-theme=light] body.pg .fam-guide:hover{color:#0A0A0A}

/* film grain: screen blend vanishes on paper, multiply keeps it */
html[data-theme=light] body::after{mix-blend-mode:multiply;opacity:.05}
/* these source rules carry !important, so the light shades must too */
html[data-theme=light] body.pg :is(.save-big b,.band-num b){color:#E04A00!important}
html[data-theme=light] body.pg :is(.bt-k,.fl-n,.tc-k,li .n){color:#B93A08!important}
/* header dropdowns (noir-nav): the "Guide" chip and the "all" arrows are small orange text */
html[data-theme=light] .dd-t em{color:#B93A08;border-color:rgba(185,58,8,.45)}
html[data-theme=light] .dd-all .arr{color:#B93A08}