/* Light theme and the theme switch. Dark is the default look; light keeps navy for the highlight blocks. */
:root[data-theme="light"]{color-scheme:light;--bg:#F5F7FB;--ink:#0F1B33;--muted:#4A5873;--card:#FFFFFF;--line:#D5DCE7;--deep:#0B7A73;--tint:#E4F5F3}
@media (prefers-color-scheme:light){:root:not([data-theme]){color-scheme:light;--bg:#F5F7FB;--ink:#0F1B33;--muted:#4A5873;--card:#FFFFFF;--line:#D5DCE7;--deep:#0B7A73;--tint:#E4F5F3}}
/* Navy blocks stay navy in both themes, so their text keeps the dark colors */
:root[data-theme="light"] :is(.callout,.facts div,.out,.stage,.pick,.dl .ic){--ink:#fff;--muted:#B9C4D8;--line:#2A3A5C;--deep:#5FD8CC;--card:#16264A}
/* Teal text is too light on white, so it uses the deeper teal */
:root[data-theme="light"] :is(h1 em,.offer h2 em,.btn.calc){color:var(--deep)}
:root[data-theme="light"] .btn.calc{border-color:var(--deep)}
:root[data-theme="light"] .btn.go,:root[data-theme="light"] .cta,:root[data-theme="light"] .slot a{color:#0F1B33}
/* The switch: one small icon. Shows a moon in light mode and a sun in dark mode. */
.theme{display:grid;place-items:center;width:34px;height:34px;margin:12px 0 0 -8px;padding:0;border:0;border-radius:99px;background:transparent;color:var(--muted);cursor:pointer}
.theme:hover{color:var(--ink)}
.theme:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.theme svg{width:18px;height:18px}
.theme .sun{display:none}
:root[data-theme="dark"] .theme .sun{display:block}:root[data-theme="dark"] .theme .moon{display:none}
:root[data-theme="light"] :is(li a,.cmd):is(:hover,:focus-visible),:root[data-theme="light"] .cmd:is(:hover,:focus-visible)::before{color:var(--deep)}
:root[data-theme="light"] :is(.callout,.out,.pick){color:var(--ink)}
:root[data-theme="light"] body>main>.tag{color:var(--deep)}