/* ── Sumi-e — dark theme override (hanada indigo + shu vermilion) ──────── */

body.dark-theme {
  /* Surfaces — sumi (indigo-black) */
  --bg:          #07101D;   /* sumi.800 — page bg, deep ink */
  --surface:     #0B1424;   /* sumi.700 */
  --surface-2:   #0E1A2C;   /* sumi.600 */
  --border:      #1A222C;   /* sumi.400 */
  --border-dark: #232C3A;   /* sumi.300 */

  /* Text — washi cream */
  --text:        #E8E0CE;   /* washi.cream-200 */
  --text-muted:  #8C826E;   /* washi.500 */
  --text-faint:  #2D2820;   /* washi.cream-700 */

  /* "Milk Green" → matcha in dark */
  --mg:          #4F5A38;   /* matcha.500 */
  --mg-light:    #0D1008;   /* matcha.900 — soft bg */
  --mg-mid:      #1A1F10;   /* matcha.800 */
  --mg-dark:     #889773;   /* matcha.300 — bright accent text on dark bg */

  /* "Milk Red" → shu vermilion in dark */
  --mr:          #B85040;   /* shu.400 */
  --mr-light:    #260605;   /* shu.900 */
  --mr-mid:      #4A0E0C;   /* shu.800 */
  --mr-dark:     #D17F69;   /* shu.300 — bright accent on dark */

  /* "Sand" → kuri chestnut in dark */
  --sand:        #7C5C30;   /* kuri.500 */
  --sand-light:  #100C06;   /* kuri.900 */
  --sand-dark:   #B89968;   /* kuri.300 — bright kuri for h1 accent */

  --shadow:    0 2px 8px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 6px 20px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);

  /* ── Soroban frame palette ────────────────────────────────────────────── */
  --sb-wood-light:    #3E2D15;  /* kuri.700 — darker frame on dark */
  --sb-wood-mid:      #20180C;  /* kuri.800 */
  --sb-wood-dark:     #100C06;  /* kuri.900 */
  --sb-beam-light:    #5E4520;  /* kuri.600 */
  --sb-beam-gold:     #7C5C30;  /* kuri.500 */
  --sb-beam-dark:     #3E2D15;  /* kuri.700 */
  --sb-rod-shadow:    #040810;  /* sumi.900 */
  --sb-rod-highlight: #36404E;  /* sumi.200 */

  /* ── Schematic bead flat fills ──────────────────────────────────────── */
  --sb-bead-red-2:  #A8362A;  /* shu.500 — same vermilion in both modes */
  --sb-bead-red-text:#FFFFFF;
  --sb-bead-grn-2:  #5E4520;  /* kuri.600 — deeper chestnut on dark */
  --sb-bead-grn-text:#FFFFFF;
  --sb-bead-off-2:  #1A222C;  /* sumi.400 — neutral matches bg */
  --sb-bead-off-text:transparent;
  --sb-stroke-red:  #D17F69;  /* shu.300 — bright on dark */
  --sb-stroke-grn:  #B89968;  /* kuri.300 — bright on dark */
  --sb-stroke-off:  #36404E;  /* sumi.200 */
  --sb-label-dim:   #8C826E;  /* washi.500 */
  --sb-label-hot:   #D17F69;  /* shu.300 */
}

/* ── Page background ─────────────────────────────────────────────────────── */

body.dark-theme {
  background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(201,168,76,.09) 1.5px, transparent 1.5px);
  color: var(--text);
}

/* ── Typography ──────────────────────────────────────────────────────────── */

body.dark-theme h1 {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--sand-dark);
}

body.dark-theme .prompt {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ── Surfaces: cards, panels, inputs ─────────────────────────────────────── */

body.dark-theme fieldset,
body.dark-theme .exercise-panel,
body.dark-theme .skill-tree-wrap,
body.dark-theme .ach-card,
body.dark-theme .dashboard-table,
body.dark-theme details {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

body.dark-theme input[type="text"],
body.dark-theme select,
body.dark-theme textarea {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

body.dark-theme input[type="text"]::placeholder { color: var(--text-muted); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

body.dark-theme button:not(.settings-toggle):not(.mode-tab):not(.dc-btn):not(.viz-tab) {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

body.dark-theme #btn-submit,
body.dark-theme #dc-start,
body.dark-theme #fa-submit,
body.dark-theme #pl-start,
body.dark-theme #pl-jump {
  background: var(--mg-mid);
  border-color: var(--mg);
  color: var(--mg-dark);
}

body.dark-theme .settings-toggle {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

body.dark-theme .settings-toggle:hover {
  background: var(--surface-2);
  border-color: var(--border-dark);
}

/* ── Mode tabs ───────────────────────────────────────────────────────────── */

body.dark-theme .mode-tab {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-muted);
}

body.dark-theme .mode-tab.active {
  background: var(--mg-mid);
  border-color: var(--mg);
  color: var(--mg-dark);
}

/* ── HR ──────────────────────────────────────────────────────────────────── */

body.dark-theme hr { border-color: var(--border); }

/* ── Details/summary ─────────────────────────────────────────────────────── */

body.dark-theme details > summary { color: var(--text-muted); }

/* ── Skill tree ──────────────────────────────────────────────────────────── */

body.dark-theme .skill-tree-tracks { color: var(--text-muted); }

body.dark-theme .skill-tree-svg g[data-status] rect {
  fill: var(--surface-2);
  stroke: var(--border);
}
body.dark-theme .skill-tree-svg g[data-status] text { fill: var(--text-faint); }

body.dark-theme .skill-tree-svg g[data-status="learning"] rect {
  fill: var(--mg-light); stroke: var(--mg);
}
body.dark-theme .skill-tree-svg g[data-status="learning"] text { fill: var(--mg-dark); }

body.dark-theme .skill-tree-svg g[data-status="provisional"] rect {
  fill: var(--sand-light); stroke: var(--sand);
}
body.dark-theme .skill-tree-svg g[data-status="provisional"] text { fill: var(--sand-dark); }

body.dark-theme .skill-tree-svg g[data-status="mastered"] rect {
  fill: var(--mg-mid); stroke: var(--mg);
}
body.dark-theme .skill-tree-svg g[data-status="mastered"] text { fill: var(--mg-dark); }

body.dark-theme .skill-tree-svg g[data-status="rusty"] rect {
  fill: var(--sand-light); stroke: var(--sand-dark);
}
body.dark-theme .skill-tree-svg g[data-status="rusty"] text { fill: var(--sand-dark); }

body.dark-theme .skill-tree-svg g.selected rect {
  fill: var(--mg-mid) !important; stroke: var(--mg-dark) !important; stroke-width: 2.5px;
}
body.dark-theme .skill-tree-svg g.selected text { fill: var(--mg-dark) !important; }

body.dark-theme .skill-tree-svg path[stroke="#d1d5db"] { stroke: var(--border-dark); }

/* ── Skill selector radio labels ─────────────────────────────────────────── */

body.dark-theme .skill-label { color: var(--text); }
body.dark-theme .skill-meta  { color: var(--text-muted); }
body.dark-theme .skill-recommended { color: var(--mg-dark); }
body.dark-theme .skill-unavailable  { color: var(--text-faint); }

/* ── Exercise panel & feedback ────────────────────────────────────────────── */

body.dark-theme .exercise-meta { color: var(--text-muted); }

body.dark-theme .feedback-correct {
  background: var(--mg-mid);
  border-color: var(--mg);
  color: var(--mg-dark);
}

body.dark-theme .feedback-incorrect {
  background: var(--mr-mid);
  border-color: var(--mr);
  color: var(--mr-dark);
}

/* ── Mastery gate blockers ────────────────────────────────────────────────── */

body.dark-theme .gate-pass  { color: var(--mg-dark); }
body.dark-theme .gate-fail  { color: var(--mr-dark); }

/* ── Achievement cards ────────────────────────────────────────────────────── */

body.dark-theme .ach-card.ach-unlocked {
  background: var(--surface-2);
  border-color: var(--sand);
}
body.dark-theme .ach-card.ach-locked {
  background: var(--surface);
  border-color: var(--border);
  opacity: 0.55;
}
body.dark-theme .ach-label { color: var(--text); }
body.dark-theme .ach-desc  { color: var(--text-muted); }
body.dark-theme .ach-date  { color: var(--text-faint); }
body.dark-theme .ach-group-title { color: var(--sand-dark); }
body.dark-theme .ach-count { color: var(--mg-dark); }

/* ── Dashboard table ─────────────────────────────────────────────────────── */

body.dark-theme .dashboard-table th { color: var(--text-muted); border-color: var(--border); }
body.dark-theme .dashboard-table td { border-color: var(--border); color: var(--text); }
body.dark-theme .dashboard-table tr:hover td { background: var(--surface-2); }

/* ── Skill status badges ─────────────────────────────────────────────────── */

body.dark-theme .status-mastered   { color: var(--mg-dark); }
body.dark-theme .status-learning   { color: var(--mg); }
body.dark-theme .status-provisional{ color: var(--sand-dark); }
body.dark-theme .status-rusty      { color: var(--sand-dark); }
body.dark-theme .status-locked     { color: var(--text-faint); }

/* ── Flash Anzan ─────────────────────────────────────────────────────────── */

body.dark-theme .flash-preset-btn {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
body.dark-theme .flash-preset-btn:hover {
  border-color: var(--sand);
  color: var(--sand-dark);
}

/* ── Daily challenge ─────────────────────────────────────────────────────── */

body.dark-theme .dc-btn {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
body.dark-theme .dc-btn.dc-btn-primary {
  background: var(--mg-mid);
  border-color: var(--mg);
  color: var(--mg-dark);
}

/* ── Certificate modal ────────────────────────────────────────────────────── */

body.dark-theme .cert-sheet {
  background: #12100c;
  color: var(--text);
}
body.dark-theme .cert-frame {
  border-color: var(--sand);
  background: #0e0c08;
}
body.dark-theme .cert-title { color: var(--sand-dark); }
body.dark-theme .cert-eyebrow,
body.dark-theme .cert-sub { color: var(--text-muted); }
body.dark-theme .cert-table th,
body.dark-theme .cert-table td { border-color: var(--border); color: var(--text); }
body.dark-theme .cert-line  { border-color: var(--border-dark); }
body.dark-theme .cert-line-label { color: var(--text-muted); }

/* ── Modals (challenge / placement / tutorial) ───────────────────────────── */

body.dark-theme .challenge-content,
body.dark-theme .placement-content,
body.dark-theme .tutorial-content {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

body.dark-theme .challenge-backdrop,
body.dark-theme .placement-backdrop,
body.dark-theme .tutorial-backdrop {
  background: rgba(0,0,0,.72);
}

/* ── Viz panel (grid/number-line etc.) ───────────────────────────────────── */

body.dark-theme .viz-tab {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-muted);
}
body.dark-theme .viz-tab.active {
  background: var(--mg-mid);
  border-color: var(--mg);
  color: var(--mg-dark);
}

/* ── Attempt log ─────────────────────────────────────────────────────────── */

body.dark-theme .log-table th  { color: var(--text-muted); border-color: var(--border); }
body.dark-theme .log-table td  { border-color: var(--border); color: var(--text); }
body.dark-theme .log-correct   { color: var(--mg-dark); }
body.dark-theme .log-incorrect { color: var(--mr-dark); }

/* ── Pause indicator ─────────────────────────────────────────────────────── */

body.dark-theme .pause-indicator { background: #2a2014; border-color: #6b5320; color: #c4a266; }
body.dark-theme .pause-indicator .pause-icon { color: #c4a266; }

/* ── Toast notifications ─────────────────────────────────────────────────── */

body.dark-theme .toast {
  background: var(--surface-2);
  border-color: var(--border-dark);
  color: var(--text);
  box-shadow: var(--shadow-md);
}

/* ── Keyboard legend ─────────────────────────────────────────────────────── */

body.dark-theme .keyboard-legend,
body.dark-theme .global-keys {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-muted);
}
body.dark-theme .legend-top { border-bottom-color: var(--border); }
body.dark-theme .legend-col-title { color: var(--sand-dark); }

/* ── Foldable practice options ───────────────────────────────────────────── */

body.dark-theme .selectors-summary {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-muted);
}
body.dark-theme .selectors-summary:hover {
  border-color: var(--sand);
  color: var(--text);
}

/* ── Stats modal ─────────────────────────────────────────────────────────── */

body.dark-theme .stats-backdrop { background: rgba(0,0,0,.72); }

body.dark-theme .stats-sheet {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}

body.dark-theme .stats-header,
body.dark-theme .stats-tabs,
body.dark-theme .stats-footer { border-color: var(--border); }

body.dark-theme .stats-title  { color: var(--sand-dark); }
body.dark-theme .stats-close  { color: var(--text-muted); }
body.dark-theme .stats-close:hover { background: var(--surface-2); color: var(--text); }

body.dark-theme .stats-tab        { color: var(--text-muted); }
body.dark-theme .stats-tab:hover  { color: var(--text); }
body.dark-theme .stats-tab.active {
  color: var(--mg-dark);
  border-bottom-color: var(--mg);
}

body.dark-theme .stats-footer        { background: var(--surface-2); }
body.dark-theme .stats-footer-label  { color: var(--text-muted); }
body.dark-theme .stats-reset         {
  border-color: var(--mr);
  color: var(--mr-dark);
}
body.dark-theme .stats-reset:hover   { background: var(--mr-mid); }