/* Colour themes. The default values live in each stylesheet's :root blocks
   (soft-editorial.css, teaching.css, panels.css). The toggle in the top bar
   sets data-theme on <html>; the blocks below override the same variables
   for that theme. Selectors use html[data-theme] so they win over :root
   whatever order the stylesheets load in. Built by tools/site/build.py. */

/* Theme switch buttons (shared by all themes). */
.theme-switch {
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--rule-medium, #5C5345); border-radius: 999px; overflow: hidden;
}
.theme-btn {
    font: inherit; font-size: 0.85rem; line-height: 1.2;
    padding: 0.3rem 0.8rem; border: 0; cursor: pointer;
    background: var(--paper-2, var(--cream-dark, #ECE6D2)); color: var(--ink, #2A241B);
}
.theme-btn + .theme-btn { border-left: 1px solid var(--rule-medium, #5C5345); }
.theme-btn[aria-pressed="true"] { background: var(--ink, #2A241B); color: var(--paper, var(--cream, #F2EEDF)); }
.theme-btn:focus-visible { outline: 3px solid var(--pink); outline-offset: -3px; }

html[data-theme="dark"] .marginalia { --marg-ink: #E6DDCB; }
html[data-theme="contrast"] .marginalia { --marg-ink: #FFFFFF; }

html[data-theme="dark"] {
    color-scheme: dark;
    --tint: #27241E;
    --atlas-paper: #4A4743;
    --atlas-frame: #6B665E;
    --atlas-line: #8E8779;
    --atlas-line-soft: #7A7468;
    --atlas-grid: rgba(190,182,166,0.3);
    --atlas-fog: #4A4743;
    --atlas-road: #E0A070;
    --atlas-node: #8FB4E8;
    --atlas-node-stroke: #1F1D1A;
    --atlas-label: #F2EEDF;
    --atlas-horizon: rgba(230,222,204,0.6);
    --atlas-region-ink: #F2EEDF;
    --illum-line: #E6DDCB;
    --illum-opacity: 0.45;
    --trail-bg-a: #2A2620;
    --trail-bg-b: #1F1C18;
    --trail-border: #5C5345;
    --trail-fg: #EEE8DA;
    --trail-link: #FF8CC4;
    --trail-hover: #6FE3D2;
    --trail-sep: #8C8170;
    --trail-current: #FFFFFF;
    --trail-muted: #C4BBA8;

    /* editorial */
    --paper: #1D1B17;
    --paper-2: #27241E;
    --ink: #EEE8DA;
    --ink-soft: #C4BBA8;
    --pink: #FF8CC4;
    --lemon: #E4EA7A;
    --blush: #3A3029;
    --sage: #9BB38A;
    --lilac: #A99FC4;
    --card-fill: rgba(255,255,255,0.05);
    --rule-soft: rgba(238,232,218,0.16);
    --rule-medium: rgba(238,232,218,0.32);
    --stripe: rgba(255,255,255,0.05);
    --tier-ephemeral: #9C4A33;
    --tier-applied: #7D6325;
    --tier-foundational: #4A6FA8;

    /* teaching */
    --cream: #121A2B;
    --cream-dark: #1A2438;
    --white: #1C2539;
    --navy: #263D6E;
    --navy-light: #32508C;
    --teal: #2CC9B5;
    --teal-light: #6FE3D2;
    --orange: #FF9A57;
    --orange-light: #FFB784;
    --yellow: #FFD66B;
    --green: #5ED69A;
    --red: #FF7B7B;
    --heading: #E6EBF3;
    --heading-2: #9CC9F0;
    --on-dark: #F4F7FB;
    --on-dark-alt: #E6EBF3;
    --link: #6FE3D2;

    /* side panels (both families) */
    --panel-bg-a: #24211C;
    --panel-bg-b: #1D1B17;
    --panel-border: rgba(238,232,218,0.14);
    --panel-shadow: rgba(0,0,0,0.45);
    --panel-heading-color: #EEE8DA;
    --panel-accent: #9BB38A;
    --panel-fg: #EEE8DA;
    --panel-fg-soft: #C4BBA8;
    --panel-btn-a: #2E2A23;
    --panel-btn-b: #3A342B;
    --panel-btn-fg: #EEE8DA;
    --panel-chevron-bg: #9BB38A;
    --panel-chevron-fg: #1D1B17;
    --panel-hover: rgba(155,179,138,0.22);
    --panel-active-a: rgba(155,179,138,0.30);
    --panel-active-b: rgba(255,140,196,0.15);
    --panel-active-accent: #FF8CC4;
}

html[data-theme="contrast"] {
    color-scheme: dark;
    --tint: #111111;
    --atlas-paper: #4A4743;
    --atlas-frame: #FFFFFF;
    --atlas-line: #E6E6E6;
    --atlas-line-soft: #CFCFCF;
    --atlas-grid: rgba(255,255,255,0.4);
    --atlas-fog: #4A4743;
    --atlas-road: #FFD166;
    --atlas-node: #7FB3FF;
    --atlas-node-stroke: #000000;
    --atlas-label: #FFFFFF;
    --atlas-horizon: rgba(255,255,255,0.85);
    --atlas-region-ink: #FFFFFF;
    --illum-line: #FFFFFF;
    --illum-opacity: 0.8;
    --trail-bg-a: #000000;
    --trail-bg-b: #000000;
    --trail-border: #FFFFFF;
    --trail-fg: #FFFFFF;
    --trail-link: #FFFF00;
    --trail-hover: #00FFD5;
    --trail-sep: #FFFFFF;
    --trail-current: #FFFFFF;
    --trail-muted: #FFFFFF;

    /* editorial */
    --paper: #000000;
    --paper-2: #111111;
    --ink: #FFFFFF;
    --ink-soft: #E6E6E6;
    --pink: #FFFF00;
    --lemon: #FFFF00;
    --blush: #222222;
    --sage: #00FF9C;
    --lilac: #B3B3FF;
    --card-fill: rgba(255,255,255,0.08);
    --rule-soft: rgba(255,255,255,0.55);
    --rule-medium: rgba(255,255,255,0.9);
    --stripe: rgba(255,255,255,0.12);
    --tier-ephemeral: #8A1F1F;
    --tier-applied: #6B5300;
    --tier-foundational: #1F4E9C;

    /* teaching */
    --cream: #000000;
    --cream-dark: #0A0A0A;
    --white: #0A0A0A;
    --navy: #002147;
    --navy-light: #003A7A;
    --teal: #00FFD5;
    --teal-light: #7FFFEA;
    --orange: #FFA500;
    --orange-light: #FFC266;
    --yellow: #FFD700;
    --green: #5CFF9E;
    --red: #FF8080;
    --heading: #FFFFFF;
    --heading-2: #FFD700;
    --on-dark: #FFFFFF;
    --on-dark-alt: #FFFFFF;
    --link: #00FFD5;

    /* side panels (both families) */
    --panel-bg-a: #0A0A0A;
    --panel-bg-b: #000000;
    --panel-border: rgba(255,255,255,0.7);
    --panel-shadow: rgba(0,0,0,0.9);
    --panel-heading-color: #FFFFFF;
    --panel-accent: #FFD700;
    --panel-fg: #FFFFFF;
    --panel-fg-soft: #E6E6E6;
    --panel-btn-a: #1A1A1A;
    --panel-btn-b: #262626;
    --panel-btn-fg: #FFFFFF;
    --panel-chevron-bg: #FFD700;
    --panel-chevron-fg: #000000;
    --panel-hover: rgba(255,215,0,0.22);
    --panel-active-a: rgba(255,215,0,0.32);
    --panel-active-b: rgba(0,255,213,0.18);
    --panel-active-accent: #FFD700;
}

/* Surfaces that were drawn with fixed colours. Each rule is scoped to the
   dark or high-contrast theme so the default look is unchanged. */
html[data-theme="dark"] .ga-guide .defn,
html[data-theme="contrast"] .ga-guide .defn { background: var(--paper-2); }
html[data-theme="dark"] .ga-guide .formula-block .c-dim,
html[data-theme="contrast"] .ga-guide .formula-block .c-dim { color: var(--ink-soft); }
html[data-theme="dark"] .ga-guide sup.cite,
html[data-theme="dark"] .ga-guide sup.cite a,
html[data-theme="contrast"] .ga-guide sup.cite,
html[data-theme="contrast"] .ga-guide sup.cite a { color: var(--lilac); }
html[data-theme="dark"] .contextual-bridge-content,
html[data-theme="contrast"] .contextual-bridge-content { background: var(--paper-2); color: var(--ink); }
/* Worked examples and guides carry their own light tints; in the dark themes
   they take the dark surface and light text. Code keeps its own colours. */
html[data-theme="dark"] .ga-guide :not(pre *):not(code *):not(svg *),
html[data-theme="contrast"] .ga-guide :not(pre *):not(code *):not(svg *) { color: var(--ink) !important; }
html[data-theme="dark"] .ga-guide strong,
html[data-theme="contrast"] .ga-guide strong { color: var(--ink); }
/* Hand-coloured parts of the worked examples, definitions and bridge panels. */
html[data-theme="dark"] .ga-guide .we-header,
html[data-theme="contrast"] .ga-guide .we-header,
html[data-theme="dark"] .ga-guide .we-result,
html[data-theme="contrast"] .ga-guide .we-result { background: var(--tint) !important; }
html[data-theme="dark"] .ga-guide .defn-label,
html[data-theme="contrast"] .ga-guide .defn-label,
html[data-theme="dark"] .ga-guide .defn-label *,
html[data-theme="contrast"] .ga-guide .defn-label * { color: var(--ink) !important; }
html[data-theme="dark"] .contextual-bridge-content strong,
html[data-theme="contrast"] .contextual-bridge-content strong { color: var(--pink) !important; }
html[data-theme="dark"] .contextual-bridge-content em,
html[data-theme="contrast"] .contextual-bridge-content em { color: var(--link, var(--ink)) !important; }
/* Contextual bridge accordion: fixed light gradient and brown text. */
html[data-theme="dark"] .contextual-bridge-accordion,
html[data-theme="contrast"] .contextual-bridge-accordion { background: var(--paper-2) !important; border-color: var(--rule-medium) !important; }
html[data-theme="dark"] .contextual-bridge-summary,
html[data-theme="contrast"] .contextual-bridge-summary { color: var(--ink) !important; }