/* Dark lesson chrome and readable exercise surfaces, only when site theme is dark. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&display=swap');

html[data-theme="dark"] {
  --page: #080c16;
  --white: #131e30;
  --ink: #f4efe4;
  --ink-soft: #a6b6ca;
  --accent: #e2c484;
  --accent-hover: #f1dba7;
  --beige: #1b2740;
  --line: #344156;
  --pale: #182335;
  --success: #7dcca8;
  --error: #e08b82;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] body {
  background: radial-gradient(ellipse at 82% 1%, #1d2941, #0c1321 34%, #080c16 65%);
  color: var(--ink);
}

html[data-theme="dark"] .skip-link {
  background: #f4efe4;
  color: #080c16;
}

html[data-theme="dark"] .site-header {
  background: rgba(8, 12, 22, 0.92);
  border-bottom: 1px solid rgba(226, 196, 132, 0.22);
}

html[data-theme="dark"] .site-header .brand-copy strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
  color: #f4efe4;
}

html[data-theme="dark"] .site-header .brand-copy small { color: #b9b9c5; }
html[data-theme="dark"] .site-header .brand-mark { background: #e2c484; color: #080c16; }
html[data-theme="dark"] .site-header .brand-equals { color: #234b52; }
html[data-theme="dark"] .site-nav { color: #d2d8e1; }
html[data-theme="dark"] .site-nav a:hover { color: #e2c484; }

html[data-theme="dark"] .hero { color: #f4efe4; }
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .section-heading h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
}
html[data-theme="dark"] .hero h1 {
  font-size: clamp(55px, 6.3vw, 89px);
  letter-spacing: -0.035em;
}
html[data-theme="dark"] .hero h1 em { color: #e2c484; }
html[data-theme="dark"] .hero .lead { color: #b6c3d4; }
html[data-theme="dark"] .hero .eyebrow,
html[data-theme="dark"] .lesson-section .kicker { color: #e2c484; }
html[data-theme="dark"] .hero .meta-line span {
  background: rgba(226, 196, 132, 0.05);
  border-color: rgba(226, 196, 132, 0.3);
  color: #d5dce8;
}
html[data-theme="dark"] .hero .button-primary { background: #e2c484; color: #101522; }
html[data-theme="dark"] .hero .button-primary:hover { background: #f1dba7; }
html[data-theme="dark"] .button-secondary {
  background: transparent;
  color: #e2c484;
  border-color: rgba(226, 196, 132, 0.4);
}
html[data-theme="dark"] .button-secondary:hover { background: rgba(226, 196, 132, 0.08); }

html[data-theme="dark"] .hero-art {
  background: linear-gradient(160deg, #24334b, #152033 58%, #101929);
  box-shadow: none;
  border: 1px solid rgba(226, 196, 132, 0.18);
}
html[data-theme="dark"] .hero-art:before { border-color: rgba(226, 196, 132, 0.22); }
html[data-theme="dark"] .art-mini-label,
html[data-theme="dark"] .art-bottom { color: #a9b5c7; }
html[data-theme="dark"] .equation-art { color: #f4efe4; }
html[data-theme="dark"] .equation-art .eq-sign { color: #e2c484; }
html[data-theme="dark"] .equation-art.final {
  background: rgba(226, 196, 132, 0.1);
  color: #e2c484;
  border-color: rgba(226, 196, 132, 0.28);
}
html[data-theme="dark"] .art-rule { color: #e2c484; }
html[data-theme="dark"] .art-rule span { border-color: rgba(226, 196, 132, 0.35); }

html[data-theme="dark"] .status-wrap {
  background: #131e30;
  border-color: #344156;
  box-shadow: none;
}
html[data-theme="dark"] .status-content strong { color: #f4efe4; }
html[data-theme="dark"] .status-description { color: #a6b6ca; }
html[data-theme="dark"] .progress-percent { color: #e2c484; }
html[data-theme="dark"] .progress-track { background: #334154; }
html[data-theme="dark"] .progress-fill { background: #e2c484; }

html[data-theme="dark"] .section-heading { color: #f4efe4; }
html[data-theme="dark"] .section-number {
  color: #e2c484;
  border-color: rgba(226, 196, 132, 0.5);
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .side-card {
  background: #131e30;
  border-color: #344156;
  box-shadow: none;
  color: #f4efe4;
}
html[data-theme="dark"] .panel h3 { color: #f4efe4; }
html[data-theme="dark"] .theory-panel > p,
html[data-theme="dark"] .panel-subtitle,
html[data-theme="dark"] .points,
html[data-theme="dark"] .privacy-note,
html[data-theme="dark"] .export-note,
html[data-theme="dark"] .summary-subnote { color: #a6b6ca; }
html[data-theme="dark"] .rule-box { background: #182335; }
html[data-theme="dark"] .rule-symbol { background: rgba(226, 196, 132, 0.14); color: #e2c484; }
html[data-theme="dark"] .rule-box p { color: #a6b6ca; }
html[data-theme="dark"] .worked-steps li { border-bottom-color: #344156; }
html[data-theme="dark"] .worked-steps li:before { color: #8a97a8; }
html[data-theme="dark"] .step-math { color: #e2c484; }
html[data-theme="dark"] .step-note { color: #a6b6ca; }
html[data-theme="dark"] .check-example {
  color: #9fd6ba;
  background: rgba(125, 204, 168, 0.12);
}
html[data-theme="dark"] .pill {
  background: rgba(226, 196, 132, 0.12);
  color: #e2c484;
}
html[data-theme="dark"] .matching-row,
html[data-theme="dark"] .equation-card {
  border-color: #344156;
  background: #101827;
}
html[data-theme="dark"] .matching-letter {
  background: rgba(226, 196, 132, 0.12);
  color: #e2c484;
}
html[data-theme="dark"] .matching-row select,
html[data-theme="dark"] .equation-card input,
html[data-theme="dark"] #student-name {
  background: #0c1320;
  border-color: #40506b;
  color: #f4efe4;
}
html[data-theme="dark"] .is-correct {
  border-color: #6fba98 !important;
  background: rgba(125, 204, 168, 0.1) !important;
}
html[data-theme="dark"] .is-incorrect {
  border-color: #c8877f !important;
  background: rgba(224, 139, 130, 0.1) !important;
}
html[data-theme="dark"] .question-id { color: #8a97a8; }
html[data-theme="dark"] .question-math { color: #e2c484; }
html[data-theme="dark"] .hint-button { color: #d4c09a; }
html[data-theme="dark"] .hint-button:hover { color: #f4efe4; }
html[data-theme="dark"] .hint {
  background: rgba(226, 196, 132, 0.12);
  color: #e8d7b4;
}
html[data-theme="dark"] .name-label span { color: #8a97a8; }
html[data-theme="dark"] .summary {
  border-color: rgba(226, 196, 132, 0.24);
  background: rgba(226, 196, 132, 0.08);
}
html[data-theme="dark"] .summary-score { color: #e2c484; }
html[data-theme="dark"] .score-total { color: #8a97a8; }
html[data-theme="dark"] .button-download {
  background: rgba(226, 196, 132, 0.12);
  color: #e2c484;
  border-color: rgba(226, 196, 132, 0.3);
}
html[data-theme="dark"] .button-download:not(:disabled):hover {
  background: rgba(226, 196, 132, 0.2);
}
html[data-theme="dark"] .side-segment:not(:last-child):before { background: #40506b; }
html[data-theme="dark"] .side-dot {
  background: rgba(226, 196, 132, 0.12);
  color: #e2c484;
}
html[data-theme="dark"] .side-segment small { color: #8a97a8; }
html[data-theme="dark"] .side-tip {
  background: #1b2740;
  border: 1px solid rgba(226, 196, 132, 0.16);
}
html[data-theme="dark"] .side-tip p { color: #d5dce8; }
html[data-theme="dark"] .site-footer {
  background: #080c16;
  border-color: #28344a;
}
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .site-footer a { color: #c4ccd7; }

html[data-theme="light"] .site-header .brand-copy strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
}
html[data-theme="light"] .hero h1,
html[data-theme="light"] .section-heading h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
}
html[data-theme="light"] .hero h1 {
  font-size: clamp(55px, 6.3vw, 89px);
  letter-spacing: -0.035em;
}

@media (max-width: 680px) {
  html[data-theme="dark"] .site-header .brand-copy strong,
  html[data-theme="light"] .site-header .brand-copy strong { font-size: 17px; }
  html[data-theme="dark"] .site-nav,
  html[data-theme="light"] .site-nav { gap: 12px; }
  html[data-theme="dark"] .site-nav a,
  html[data-theme="light"] .site-nav a { font-size: 12px; }
  html[data-theme="dark"] .hero,
  html[data-theme="light"] .hero { padding-top: 45px; }
}

@media (max-width: 370px) {
  html[data-theme="dark"] .site-header .brand-copy small,
  html[data-theme="light"] .site-header .brand-copy small { display: none; }
  html[data-theme="dark"] .site-nav,
  html[data-theme="light"] .site-nav { gap: 8px; }
  html[data-theme="dark"] .site-nav a,
  html[data-theme="light"] .site-nav a { font-size: 11px; }
}