/* DARK THEME — everything that changes when .
Set by src/core/theme.js (and by the inline script in index.html on load).
Loaded after every component stylesheet and before responsive.css, so these
rules win. Most of the work is done by redefining the tokens; the rules
below are the places where a hard-coded colour needed a dark counterpart. */
html[data-theme="dark"] {
color-scheme: dark;
--cream:#0A1F35;
--paper:#102A43;
--paper-2:#173754;
--navy:#F6EEDC;
--navy-2:#D9E7F5;
--ink:#F6EEDC;
--muted:#B8C7D7;
--oat:#27435D;
--line:#34506A;
--shadow:0 18px 60px rgba(0,0,0,.22);
--shadow-soft:0 8px 26px rgba(0,0,0,.18);
}
html[data-theme="dark"] body {
background:radial-gradient(circle at 45% -10%,rgba(78,110,143,.34) 0,rgba(10,31,53,.20) 30%,transparent 56%),var(--cream);
color:var(--ink);
}
/* chrome */
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .bottom-nav{background:rgba(10,31,53,.92);border-color:rgba(246,238,220,.10)}
html[data-theme="dark"] .brand,
html[data-theme="dark"] .desktop-nav a,
html[data-theme="dark"] .back-link{color:var(--ink)}
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .age-chip{background:#173754;color:var(--ink);border-color:#34506A}
html[data-theme="dark"] .desktop-nav .join-link,
html[data-theme="dark"] .btn-primary{background:#F3D58C;color:#0A2745}
html[data-theme="dark"] .site-footer{color:var(--muted)}
/* page backgrounds */
html[data-theme="dark"] .steps{background:var(--paper)}
html[data-theme="dark"] .marketing-hero::after{background:var(--paper)}
html[data-theme="dark"] .section-warm{background:linear-gradient(180deg,var(--paper),#122C45)}
/* cards and body copy */
html[data-theme="dark"] .card,
html[data-theme="dark"] .take-card,
html[data-theme="dark"] .quick-tips,
html[data-theme="dark"] .session-card,
html[data-theme="dark"] .question-option,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .library-card{background:#102A43;color:var(--ink);border-color:#34506A}
html[data-theme="dark"] .lead,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .card li,
html[data-theme="dark"] .action-item p,
html[data-theme="dark"] .library-card p,
html[data-theme="dark"] .session-card p{color:#C4D1DE}
/* controls */
html[data-theme="dark"] .question-option:hover,
html[data-theme="dark"] .question-option.selected{background:#24415C;border-color:#F3C872}
html[data-theme="dark"] .answer-chip{background:#324A65;color:#F6EEDC}
html[data-theme="dark"] .feedback button,
html[data-theme="dark"] .filters button{background:#173754;color:#F6EEDC;border-color:#34506A}
html[data-theme="dark"] .feedback button.selected,
html[data-theme="dark"] .filters button.active{background:#F3D58C;color:#0A2745}
html[data-theme="dark"] input{color:#0A2745;background:#FFFDF9}
/* the coloured blocks, which are all hard-coded pastels in the light theme */
html[data-theme="dark"] .issue-card.peach{background:#5B3F3C}
html[data-theme="dark"] .issue-card.blue{background:#29445E}
html[data-theme="dark"] .issue-card.sage{background:#314D43}
html[data-theme="dark"] .issue-card.oat{background:#4A4035}
html[data-theme="dark"] .cosmic-card{background:linear-gradient(135deg,#5E4051,#45334B)}
html[data-theme="dark"] .newsletter{background:linear-gradient(135deg,#173754,#0A1F35)}
html[data-theme="dark"] .quote-card{background:#4A3C33;color:#F6EEDC}
html[data-theme="dark"] .quote-card p{color:#D9CFC5}
html[data-theme="dark"] .library-hero{background:linear-gradient(180deg,#665236,#4C3E2D);color:#FFF4DB}
html[data-theme="dark"] .take-note{background:#3C3552;color:#F6EEDC}
html[data-theme="dark"] .take-note p{color:#DAD1E9}
/* the stage summary card keeps its pastel background, so its text stays dark */
html[data-theme="dark"] .stage-aside .card{color:#0A2745}
html[data-theme="dark"] .stage-aside .card p{color:#27435D}
html[data-theme="dark"] .modal-backdrop{background:rgba(1,12,24,.68)}
/* Refined control contrast: calm, but clearly legible at 2am. */
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .btn-soft,
html[data-theme="dark"] .age-options button{background:#173754;color:#F6EEDC;border:1px solid #5C7892}
html[data-theme="dark"] .btn-ghost:hover,
html[data-theme="dark"] .btn-soft:hover,
html[data-theme="dark"] .age-options button:hover{background:#244764;border-color:#7892A9}
html[data-theme="dark"] .btn-primary:hover{background:#FFE1A0}
html[data-theme="dark"] .btn:active,
html[data-theme="dark"] .icon-btn:active,
html[data-theme="dark"] .theme-toggle:active{transform:translateY(1px)}
html[data-theme="dark"] .btn:disabled,
html[data-theme="dark"] .question-option:disabled,
html[data-theme="dark"] button:disabled{background:#203A53;color:#91A4B6;border-color:#405B73;opacity:1;cursor:not-allowed}
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .age-chip{background:#173754;color:#F6EEDC;border-color:#5C7892}
html[data-theme="dark"] .text-link,
html[data-theme="dark"] .card a:not(.btn){color:#FFE3A8}
html[data-theme="dark"] .bottom-nav a{color:#D9E7F5;opacity:.72}
html[data-theme="dark"] .bottom-nav a.active{color:#FFF4DB;background:#173754;opacity:1}
html[data-theme="dark"] .share-panel{background:linear-gradient(135deg,#173754,#102A43);border-color:#4B6881}
html[data-theme="dark"] .share-card-copy p,
html[data-theme="dark"] .share-preview{color:#D3DFEA}
html[data-theme="dark"] .share-fallback{background:rgba(10,31,53,.54);border-color:#4B6881}
html[data-theme="dark"] :focus-visible{outline-color:#F3D58C}
html[data-theme="dark"] .share-card-copy p{color:#D3DFEA}