/* =========================================================
   Caxton — themes.
   Each theme overrides CSS custom properties consumed by main.css.
   We intentionally use named themes (not "dark mode") so kids and
   parents can pick what works for them.
   ========================================================= */

:root {
  /* Type stacks. Themes can swap these. */
  --font-body:    'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --font-display: 'IBM Plex Serif', Georgia, serif;
  --font-ui:      'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --shadow: rgba(60, 40, 10, 0.08);
}

/* ---------- Parchment (default) ---------- */
html[data-theme="parchment"] {
  --bg-page:           #f7f1e1;
  --bg-topbar:         rgba(247, 241, 225, 0.9);
  --bg-panel:          #fffaee;
  --bg-panel-soft:     #f1e9d2;
  --bg-editor:         #fffdf5;
  --bg-illustration:        #e7dcbf;
  --bg-illustration-footer: #ddd0ac;

  --text-primary:      #2a1f12;
  --text-secondary:    #5a4a36;
  --text-muted:        #8a7757;
  --text-on-illustration: #4a3b22;

  --accent:            #d8b659;
  --accent-soft:       #f3e6b8;
  --accent-strong:     #8a5a17;
  --accent-on:         #fffaee;

  --border:            #d6c39a;
  --focus-ring:        #8a5a17;

  --punctuation-color: #b13a1f;
  --slot-dot:          #c2a673;
  --slot-active-bg:    #f7e9bc;
  --slot-filled-bg:    #fdf3d2;

  --success:           #2f6b3a;
  --success-soft:      #d6ebd8;
  --warn:              #8a5a17;
  --warn-soft:         #f7e9bc;
  --error:             #a02d1f;
  --error-soft:        #f4d6cf;
}

/* ---------- Night ---------- */
html[data-theme="night"] {
  --bg-page:           #0e1322;
  --bg-topbar:         rgba(14, 19, 34, 0.9);
  --bg-panel:          #182039;
  --bg-panel-soft:     #1f2a48;
  --bg-editor:         #11182c;
  --bg-illustration:        #1c2541;
  --bg-illustration-footer: #15203b;

  --text-primary:      #f1ecdc;
  --text-secondary:    #c2bdaa;
  --text-muted:        #8b8676;
  --text-on-illustration: #e9e3ce;

  --accent:            #ffce6b;
  --accent-soft:       #2c3656;
  --accent-strong:     #ffce6b;
  --accent-on:         #1a1f33;

  --border:            #2c3656;
  --focus-ring:        #ffce6b;

  --punctuation-color: #ffce6b;
  --slot-dot:          #6a7398;
  --slot-active-bg:    #2c3656;
  --slot-filled-bg:    #232b48;

  --success:           #74e0a3;
  --success-soft:      #1c3a2a;
  --warn:              #ffce6b;
  --warn-soft:         #3a2f12;
  --error:             #ff8b78;
  --error-soft:        #3a1f1a;

  --shadow: rgba(0, 0, 0, 0.45);
}

/* ---------- High contrast (max legibility) ---------- */
html[data-theme="high-contrast"] {
  --bg-page:           #ffffff;
  --bg-topbar:         #ffffff;
  --bg-panel:          #ffffff;
  --bg-panel-soft:     #f0f0f0;
  --bg-editor:         #ffffff;
  --bg-illustration:        #f4f4f4;
  --bg-illustration-footer: #e8e8e8;

  --text-primary:      #000000;
  --text-secondary:    #000000;
  --text-muted:        #1d1d1d;
  --text-on-illustration: #000000;

  --accent:            #fff100;
  --accent-soft:       #fff7a8;
  --accent-strong:     #0040c8;
  --accent-on:         #ffffff;

  --border:            #000000;
  --focus-ring:        #0040c8;

  --punctuation-color: #0040c8;
  --slot-dot:          #000000;
  --slot-active-bg:    #fff7a8;
  --slot-filled-bg:    #ffffff;

  --success:           #003c00;
  --success-soft:      #c8f0c8;
  --warn:              #6f3500;
  --warn-soft:         #ffe5b8;
  --error:             #a00000;
  --error-soft:        #ffd8d8;

  --shadow: rgba(0, 0, 0, 0.2);
}

html[data-theme="high-contrast"] .editor { font-weight: 500; }
html[data-theme="high-contrast"] .icon-btn,
html[data-theme="high-contrast"] .btn,
html[data-theme="high-contrast"] .palette button,
html[data-theme="high-contrast"] .choice-btn,
html[data-theme="high-contrast"] .story-card { border-width: 2px; }

/* ---------- Dyslexia friendly ---------- */
html[data-theme="dyslexia"] {
  --font-body:    'Atkinson Hyperlegible', 'Verdana', system-ui, sans-serif;
  --font-display: 'Atkinson Hyperlegible', 'Verdana', system-ui, sans-serif;
  --font-ui:      'Atkinson Hyperlegible', 'Verdana', system-ui, sans-serif;

  --bg-page:           #fbf6e9;          /* cream — reduces glare */
  --bg-topbar:         rgba(251, 246, 233, 0.92);
  --bg-panel:          #fffdf3;
  --bg-panel-soft:     #f1ead4;
  --bg-editor:         #fffdf3;
  --bg-illustration:        #e8dfba;
  --bg-illustration-footer: #d8ce9e;

  --text-primary:      #20242c;          /* not pure black */
  --text-secondary:    #424650;
  --text-muted:        #6b6f7b;
  --text-on-illustration: #2c2f37;

  --accent:            #f7d27b;
  --accent-soft:       #fbe9bd;
  --accent-strong:     #1f5da4;
  --accent-on:         #fffdf3;

  --border:            #c9bf95;
  --focus-ring:        #1f5da4;

  --punctuation-color: #1f5da4;
  --slot-dot:          #8a8160;
  --slot-active-bg:    #fbe9bd;
  --slot-filled-bg:    #fff7da;

  --success:           #23693a;
  --success-soft:      #d6ebd6;
  --warn:              #8a5a17;
  --warn-soft:         #fbe9bd;
  --error:             #9d2c2c;
  --error-soft:        #f0d6d4;
}

/* Extra spacing for dyslexia readers. */
html[data-theme="dyslexia"] body          { line-height: 1.7; }
html[data-theme="dyslexia"] .editor       { line-height: 2.1; letter-spacing: 0.015em; word-spacing: 0.06em; }
html[data-theme="dyslexia"] .story-blurb,
html[data-theme="dyslexia"] .editor-instructions { line-height: 1.7; }

/* ---------- Soft pastel (low stimulation) ---------- */
html[data-theme="soft-pastel"] {
  --bg-page:           #fef5f5;
  --bg-topbar:         rgba(254, 245, 245, 0.92);
  --bg-panel:          #ffffff;
  --bg-panel-soft:     #fce8ec;
  --bg-editor:         #fffafb;
  --bg-illustration:        #e2eaf6;
  --bg-illustration-footer: #d4dff0;

  --text-primary:      #2d2742;
  --text-secondary:    #574d70;
  --text-muted:        #877d99;
  --text-on-illustration: #2d2742;

  --accent:            #ffc6d3;
  --accent-soft:       #ffe1e8;
  --accent-strong:     #6f5cb3;
  --accent-on:         #ffffff;

  --border:            #e7d2dc;
  --focus-ring:        #6f5cb3;

  --punctuation-color: #6f5cb3;
  --slot-dot:          #c6b6d2;
  --slot-active-bg:    #ffe1e8;
  --slot-filled-bg:    #f5edff;

  --success:           #2f8062;
  --success-soft:      #d3eee0;
  --warn:              #b5722e;
  --warn-soft:         #fde4c8;
  --error:             #b53b54;
  --error-soft:        #fcd9e0;
}

/* ---------- Calm sage ---------- */
html[data-theme="calm-sage"] {
  --bg-page:           #eef3ec;
  --bg-topbar:         rgba(238, 243, 236, 0.92);
  --bg-panel:          #f8fbf6;
  --bg-panel-soft:     #dfe7d9;
  --bg-editor:         #f8fbf6;
  --bg-illustration:        #cfd9c4;
  --bg-illustration-footer: #b8c4ab;

  --text-primary:      #1f2a25;
  --text-secondary:    #455048;
  --text-muted:        #6f7a72;
  --text-on-illustration: #1f2a25;

  --accent:            #b1c89a;
  --accent-soft:       #dceacc;
  --accent-strong:     #3f6b3a;
  --accent-on:         #ffffff;

  --border:            #b8c4ab;
  --focus-ring:        #3f6b3a;

  --punctuation-color: #3f6b3a;
  --slot-dot:          #94a48b;
  --slot-active-bg:    #dceacc;
  --slot-filled-bg:    #eaf2dd;

  --success:           #3f6b3a;
  --success-soft:      #d8e8d2;
  --warn:              #8a6a17;
  --warn-soft:         #ece2bd;
  --error:             #8a3a1f;
  --error-soft:        #f0d6cf;
}

/* ---------- Gary's Dream (powder pink) ---------- */
html[data-theme="garys-dream"] {
  --bg-page:           #fff0f5;          /* powder pink */
  --bg-topbar:         rgba(255, 240, 245, 0.92);
  --bg-panel:          #ffffff;
  --bg-panel-soft:     #fde1ec;
  --bg-editor:         #fffafc;
  --bg-illustration:        #ffd1de;
  --bg-illustration-footer: #f4b9cb;

  --text-primary:      #3d1726;          /* near-black with a hint of plum */
  --text-secondary:    #6b3548;
  --text-muted:        #946173;
  --text-on-illustration: #3d1726;

  --accent:            #ffb3cb;          /* clean powder pink */
  --accent-soft:       #ffe1ec;
  --accent-strong:     #aa3a64;          /* deeper rose for buttons / focus */
  --accent-on:         #ffffff;

  --border:            #f1c5d4;
  --focus-ring:        #aa3a64;

  --punctuation-color: #aa3a64;
  --slot-dot:          #d59cae;
  --slot-active-bg:    #ffd6e4;
  --slot-filled-bg:    #ffe7ee;

  --success:           #2f7d5a;
  --success-soft:      #d6efe2;
  --warn:              #a85a14;
  --warn-soft:         #fde2c8;
  --error:             #b03050;
  --error-soft:        #fcd7df;

  --shadow: rgba(150, 50, 90, 0.12);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}