/* Light theme: follows the system, or the header toggle. Dark values are the defaults in styles.css. */
:root[data-theme=light]{
  color-scheme:light;
  --bg:#fafafa;--surface:#ffffff;--surface-2:#f4f4f5;--surface-3:#e9e9ed;--line:#e4e4e7;--line-2:#d4d4d8;
  --ink:#18181b;--muted:#52525b;--dim:#71717a;
  --accent:#15803d;--accent-ink:#ffffff;--accent-soft:#15803d14;--accent-line:#15803d45;
  --amber:#b45309;--amber-soft:#b4530914;--red:#dc2626;--red-soft:#dc262614;--blue:#2563eb;
  --shadow:0 18px 50px #0000001c;
}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]){
  color-scheme:light;
  --bg:#fafafa;--surface:#ffffff;--surface-2:#f4f4f5;--surface-3:#e9e9ed;--line:#e4e4e7;--line-2:#d4d4d8;
  --ink:#18181b;--muted:#52525b;--dim:#71717a;
  --accent:#15803d;--accent-ink:#ffffff;--accent-soft:#15803d14;--accent-line:#15803d45;
  --amber:#b45309;--amber-soft:#b4530914;--red:#dc2626;--red-soft:#dc262614;--blue:#2563eb;
  --shadow:0 18px 50px #0000001c;
}}

:root[data-theme=light] .ambient{opacity:.35}
@media(prefers-color-scheme:light){:root:not([data-theme=dark]) .ambient{opacity:.35}}
.theme-toggle{display:inline-grid;place-items:center;width:34px;height:32px;padding:0;border:1px solid var(--line-2);border-radius:7px;background:var(--surface);color:var(--muted);cursor:pointer}
.theme-toggle:hover{color:var(--ink);border-color:var(--dim)}

/* Hardcoded dark values that need light counterparts */
:root[data-theme=light] .topbar,:root[data-theme=light] .topbar.scrolled{background:#fafafad9}
:root[data-theme=light] .button:hover:not(:disabled),:root[data-theme=light] .button:hover{background:#3f3f46;border-color:#3f3f46}
:root[data-theme=light] .button.outline:hover:not(:disabled),:root[data-theme=light] .button.outline:hover,:root[data-theme=light] .minutes-chip:hover{border-color:#a1a1aa}
:root[data-theme=light] input::placeholder,:root[data-theme=light] textarea::placeholder{color:#a1a1aa}
:root[data-theme=light] .code-input::placeholder{color:#d4d4d8}
:root[data-theme=light] input:focus,:root[data-theme=light] select:focus,:root[data-theme=light] textarea:focus{border-color:#71717a;box-shadow:0 0 0 3px #00000010}
:root[data-theme=light] .callout,:root[data-theme=light] .rule-result[data-tone=held]{color:#92400e;border-color:#b4530940}
:root[data-theme=light] .rule-result[data-tone=held]{background:#b4530912}
:root[data-theme=light] .dots i,:root[data-theme=light] .traffic i{background:#d4d4d8}
:root[data-theme=light] .term pre,:root[data-theme=light] pre,:root[data-theme=light] .test-decision,:root[data-theme=light] .rule-result{color:var(--ink)}
:root[data-theme=light] .term pre .s{color:#a16207}
:root[data-theme=light] .faq summary:hover{color:#000}
:root[data-theme=light] .r1{background:linear-gradient(#a1a1aa,#d4d4d8)}
:root[data-theme=light] body::before{opacity:.5}
@media(prefers-color-scheme:light){
:root:not([data-theme=dark]) .topbar,:root:not([data-theme=dark]) .topbar.scrolled{background:#fafafad9}
:root:not([data-theme=dark]) .button:hover:not(:disabled),:root:not([data-theme=dark]) .button:hover{background:#3f3f46;border-color:#3f3f46}
:root:not([data-theme=dark]) .button.outline:hover:not(:disabled),:root:not([data-theme=dark]) .button.outline:hover,:root:not([data-theme=dark]) .minutes-chip:hover{border-color:#a1a1aa}
:root:not([data-theme=dark]) input::placeholder,:root:not([data-theme=dark]) textarea::placeholder{color:#a1a1aa}
:root:not([data-theme=dark]) .code-input::placeholder{color:#d4d4d8}
:root:not([data-theme=dark]) input:focus,:root:not([data-theme=dark]) select:focus,:root:not([data-theme=dark]) textarea:focus{border-color:#71717a;box-shadow:0 0 0 3px #00000010}
:root:not([data-theme=dark]) .callout,:root:not([data-theme=dark]) .rule-result[data-tone=held]{color:#92400e;border-color:#b4530940}
:root:not([data-theme=dark]) .rule-result[data-tone=held]{background:#b4530912}
:root:not([data-theme=dark]) .dots i,:root:not([data-theme=dark]) .traffic i{background:#d4d4d8}
:root:not([data-theme=dark]) .term pre,:root:not([data-theme=dark]) pre,:root:not([data-theme=dark]) .test-decision,:root:not([data-theme=dark]) .rule-result{color:var(--ink)}
:root:not([data-theme=dark]) .term pre .s{color:#a16207}
:root:not([data-theme=dark]) .faq summary:hover{color:#000}
:root:not([data-theme=dark]) .r1{background:linear-gradient(#a1a1aa,#d4d4d8)}
:root:not([data-theme=dark]) body::before{opacity:.5}
}