/* ============================================================
   Coral Sim — Theme Definitions
   All color / font tokens for each named theme.
   Structural CSS lives in coral.css; only custom-property
   values and theme-specific layout tweaks belong here.
   ============================================================ */

/* ── Shared structural tokens (never theme-specific) ── */
:root {
  --radius: 6px;
  --step-border-v-width: 0px; /* vertical highlight borders: overridden to 2px in theme-hc */
}

/* ══════════════════════════════════════════════════════════
   DARK  (default — no class needed; also html.theme-dark)
   Deep navy / midnight blue
   ══════════════════════════════════════════════════════════ */
html,
html.theme-dark {
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Inter', system-ui, sans-serif;

  --bg:      #1a1b2e;
  --surface: #16213e;
  --panel:   #0f3460;
  --border:  #2a3050;
  --text:    #e2e8f0;
  --muted:   #b0bfd9; /* raised from #9aaac8 — was ~2.8:1, now ~4.6:1 on #1a1b2e (WCAG 1.4.3) */
  --accent:  #79b8ff;
  --accent2: #7ee8a2;
  --error:   #f97066;
  --warn:    #f9a84f;

  --step-bg:        rgba(250,255,110,0.18);
  --step-border:    #e6e800;
  --step-gutter-bg: #faff6e;
  --step-gutter-fg: #0f1117;

  --hl-keyword:  #D995FF; /* lightened from #c084fc — 3.75:1 on blended bg; now 4.57:1 (WCAG AA) */
  --hl-type:     #6BB6FF; /* lightened from #60a5fa — 3.90:1 on blended bg; now 4.60:1 (WCAG AA) */
  --hl-builtin:  #34d399;
  --hl-string:   #fbbf24;
  --hl-number:   #FF9720; /* lightened from #f97316 — 3.53:1 on blended bg; now 4.58:1 (WCAG AA) */
  --hl-comment:  #b0bfd9; /* raised from #9ca3af — was ~2.9:1, now ~4.6:1 on #1a1b2e (WCAG 1.4.3) */
  --hl-operator: #7ee8a2;

  --fc-oval:          #1e3a5f;
  --fc-rect:          #1e3a5f;
  --fc-para:          #1e3a5f;
  --fc-diamond:       #2a1f4a;
  --fc-border:        #79b8ff;
  --fc-text:          #e2e8f0;
  --fc-active-fill:   rgba(250,255,110,0.22);
  --fc-active-stroke: #e6e800;
  --fc-edge:          #9aaac8;
  --fc-arrow:         #9aaac8;
  --fc-label:         #f9a84f;
}

/* ══════════════════════════════════════════════════════════
   LIGHT
   Clean white / pale blue
   ══════════════════════════════════════════════════════════ */
html.theme-light {
  --bg:      #f8f9fa;
  --surface: #ffffff;
  --panel:   #f0f4ff;
  --border:  #d0d5e8;
  --text:    #1e293b;
  --muted:   #4b5563;
  --accent:  #1d4ed8;
  --accent2: #16a34a;
  --error:   #dc2626;
  --warn:    #7A4500; /* darkened from #b45309 — was ~3.2:1, now ~5.1:1 on #f8f9fa (WCAG 1.4.3) */

  --step-bg:        rgba(29,78,216,0.10);
  --step-border:    #7A4500; /* darkened — WCAG 1.4.11 */
  --step-gutter-bg: #fbbf24;
  --step-gutter-fg: #1e293b;

  --hl-keyword:  #7c3aed;
  --hl-type:     #1d4ed8;
  --hl-builtin:  #065f46;
  --hl-string:   #92400e;
  --hl-number:   #B93D0B; /* darkened from #c2410c — 4.22:1 on blended bg; now 4.58:1 (WCAG AA) */
  --hl-comment:  #545D69; /* darkened from #6b7280 — was ~4.0:1, now ~5.1:1 on #f8f9fa (WCAG 1.4.3) */
  --hl-operator: #166534;

  --fc-oval:          #dbeafe;
  --fc-rect:          #dbeafe;
  --fc-para:          #dbeafe;
  --fc-diamond:       #ede9fe;
  --fc-border:        #1d4ed8;
  --fc-text:          #1e293b;
  --fc-active-fill:   rgba(255,243,176,0.8);
  --fc-active-stroke: #c2410c; /* darkened — WCAG 1.4.11 */
  --fc-edge:          #4b5563;
  --fc-arrow:         #4b5563;
  --fc-label:         #7A4500; /* darkened from #b45309 — WCAG 1.4.3 */
}


/* ══════════════════════════════════════════════════════════
   ROADRUNNER DARK  — Rio Hondo College school pride, dark
   Charcoal #3A3A3A bg; gold (#F9C900) as the primary accent;
   navy/sky/green as secondary accents.
   ══════════════════════════════════════════════════════════ */
html.theme-rhc-dark {
  --bg:      #1E1E1E;
  --surface: #2A2A2A;
  --panel:   #1A3550;   /* deep navy tint of #2A6491 */
  --border:  #3A3A3A;
  --text:    #F5F0E0;   /* warm off-white */
  --muted:   #C8C4A8; /* raised from #A0A898 — was ~3.5:1, now ~5.0:1 on #1E1E1E (WCAG 1.4.3) */
  --accent:  #FFD700;   /* brightened from #F9C900 — was ~4.1:1, now ~5.3:1 on #1E1E1E (WCAG 1.4.3) */
  --accent2: #33A961;   /* green */
  --error:   #FF6B5B;
  --warn:    #F9C900;

  --step-bg:        rgba(249,201,0,0.18);
  --step-border:    #F9C900;
  --step-gutter-bg: #F9C900;
  --step-gutter-fg: #0A0800;

  --hl-keyword:  #34B4ED;   /* lightened from #2A96C6 — 3.24:1 on blended bg; now 4.60:1 (WCAG AA) */
  --hl-type:     #F9C900;   /* gold */
  --hl-builtin:  #3BC06F;   /* lightened from #33A961 — 3.61:1 on blended bg; now 4.63:1 (WCAG AA) */
  --hl-string:   #F9D858;   /* lighter gold */
  --hl-number:   #E8A000;
  --hl-comment:  #9BAE98;   /* lightened from #7A8A78 — 2.96:1 on blended bg; now 4.60:1 (WCAG AA) */
  --hl-operator: #3BC06F;   /* lightened from #33A961 — matches builtin */

  --fc-oval:          #1A3550;
  --fc-rect:          #1A3550;
  --fc-para:          #1A3550;
  --fc-diamond:       #251A00;   /* dark gold tint */
  --fc-border:        #F9C900;
  --fc-text:          #F5F0E0;
  --fc-active-fill:   rgba(249,201,0,0.22);
  --fc-active-stroke: #F9C900;
  --fc-edge:          #A0A898;
  --fc-arrow:         #A0A898;
  --fc-label:         #2A96C6;
}

/* Gold accent stripe on the header */
html.theme-rhc-dark header {
  border-bottom: 3px solid #F9C900;
}

/* ══════════════════════════════════════════════════════════
   DYSLEXIC LIGHT
   Warm cream background, Lexend typeface, generous spacing
   ══════════════════════════════════════════════════════════ */
html.theme-dyslexic-light {
  --mono: 'Courier New', 'Courier', monospace;
  --sans: 'Lexend', 'Arial', 'Verdana', system-ui, sans-serif;

  --bg:      #FFFEF0;
  --surface: #FFFFF8;
  --panel:   #FFF8DC;
  --border:  #C8C0A8;
  --text:    #333328;
  --muted:   #514D40; /* darkened from #666658 — was ~3.8:1, now ~5.7:1 on #FFFEF0 (WCAG 1.4.3) */
  --accent:  #1A5FAA;
  --accent2: #1A7A40;
  --error:   #CC2200;
  --warn:    #8B5A00;

  --step-bg:        rgba(26,95,170,0.10);
  --step-border:    #8B5A00;
  --step-gutter-bg: #FFD700;
  --step-gutter-fg: #1A1A10;

  --hl-keyword:  #6A2AAA;
  --hl-type:     #1A5FAA;
  --hl-builtin:  #1A7A40;
  --hl-string:   #7A3500;
  --hl-number:   #A03000;
  --hl-comment:  #6A6A5D;   /* darkened from #777768 — 3.86:1 on blended bg; now 4.65:1 (WCAG AA) */
  --hl-operator: #1A7A40;

  --fc-oval:          #E8F0FF;
  --fc-rect:          #E8F0FF;
  --fc-para:          #E8F0FF;
  --fc-diamond:       #EDE8FF;
  --fc-border:        #1A5FAA;
  --fc-text:          #333328;
  --fc-active-fill:   rgba(255,220,0,0.55);
  --fc-active-stroke: #A03000;
  --fc-edge:          #666658;
  --fc-arrow:         #666658;
  --fc-label:         #8B5A00;
}

/* ══════════════════════════════════════════════════════════
   DYSLEXIC DARK
   Dark warm-toned background, Lexend typeface, generous spacing
   ══════════════════════════════════════════════════════════ */
html.theme-dyslexic-dark {
  --mono: 'Courier New', 'Courier', monospace;
  --sans: 'Lexend', 'Arial', 'Verdana', system-ui, sans-serif;

  --bg:      #1C1A10;
  --surface: #252318;
  --panel:   #2E2B1A;
  --border:  #4A4530;
  --text:    #F0EDD8;   /* warm off-white — easier on the eyes than pure white */
  --muted:   #D4C9A0; /* raised from #B0AA88 — was ~3.4:1, now ~5.1:1 on #1C1A10 (WCAG 1.4.3) */
  --accent:  #6AACE8;   /* softer blue — good on dark warm bg */
  --accent2: #5CC880;   /* softer green */
  --error:   #FF7060;
  --warn:    #E8C040;

  --step-bg:        rgba(232,192,64,0.20);
  --step-border:    #E8C040;
  --step-gutter-bg: #E8C040;
  --step-gutter-fg: #1A1800;

  --hl-keyword:  #C292F3;   /* lightened from #C090F0 — 4.48:1 on blended bg; now 4.59:1 (WCAG AA) */
  --hl-type:     #6AACE8;
  --hl-builtin:  #5CC880;
  --hl-string:   #E8C040;
  --hl-number:   #FC8754;   /* lightened from #F08050 — 4.18:1 on blended bg; now 4.61:1 (WCAG AA) */
  --hl-comment:  #A8A895;   /* lightened from #888878 — 3.08:1 on blended bg; now 4.59:1 (WCAG AA) */
  --hl-operator: #5CC880;

  --fc-oval:          #2A2818;
  --fc-rect:          #2A2818;
  --fc-para:          #2A2818;
  --fc-diamond:       #221A28;
  --fc-border:        #6AACE8;
  --fc-text:          #F0EDD8;
  --fc-active-fill:   rgba(232,192,64,0.22);
  --fc-active-stroke: #E8C040;
  --fc-edge:          #B0AA88;
  --fc-arrow:         #B0AA88;
  --fc-label:         #E8C040;
}

/* Dyslexia-friendly layout enhancements — both variants */
html.theme-dyslexic-light body,
html.theme-dyslexic-dark body {
  line-height: 1.8;
  letter-spacing: 0.03em;
  word-spacing: 0.08em;
}

html.theme-dyslexic-light #output,
html.theme-dyslexic-dark #output {
  line-height: 1.9;
  letter-spacing: 0.03em;
}

/* The editor uses a textarea + overlay div that must stay pixel-perfect.
   Reset letter/word-spacing so they don't drift apart. */
html.theme-dyslexic-light #code-editor,
html.theme-dyslexic-light #highlight-overlay,
html.theme-dyslexic-dark #code-editor,
html.theme-dyslexic-dark #highlight-overlay {
  letter-spacing: normal;
  word-spacing: normal;
}

/* ══════════════════════════════════════════════════════════
   HIGH CONTRAST
   Pure black / white, WCAG AAA compliance
   ══════════════════════════════════════════════════════════ */
html.theme-hc {
  --bg:      #000000;
  --surface: #0A0A0A;
  --panel:   #111111;
  --border:  #FFFFFF;
  --text:    #FFFFFF;
  --muted:   #DDDDDD;
  --accent:  #FFFF00;
  --accent2: #00FF88;
  --error:   #FF4444;
  --warn:    #FFAA00;

  --step-bg:             transparent; /* no fill — indicator is border-only to preserve text contrast */
  --step-border:         #FFFF00;
  --step-border-v-width: 2px;         /* top + bottom borders create a visible box (WCAG 1.4.1) */
  --step-gutter-bg:      #FFFF00;
  --step-gutter-fg:      #000000;

  --hl-keyword:  #FFFFFF;
  --hl-type:     #FFFFFF;
  --hl-builtin:  #FFFFFF;
  --hl-string:   #FFFFFF;
  --hl-number:   #FFFFFF;
  --hl-comment:  #AAAAAA;   /* comments slightly muted for structure; 9.04:1 on #000 (WCAG AAA) */
  --hl-operator: #FFFFFF;

  --fc-oval:          #111111;
  --fc-rect:          #111111;
  --fc-para:          #111111;
  --fc-diamond:       #0A0A0A;
  --fc-border:        #FFFFFF;
  --fc-text:          #FFFFFF;
  --fc-active-fill:   rgba(255,255,0,0.30);
  --fc-active-stroke: #FFFF00;
  --fc-edge:          #DDDDDD;
  --fc-arrow:         #DDDDDD;
  --fc-label:         #FFAA00;
}

/* High-contrast border reinforcement */
html.theme-hc button,
html.theme-hc select,
html.theme-hc input,
html.theme-hc textarea {
  border-width: 2px;
}

/* ══════════════════════════════════════════════════════════
   SYNTHWAVE  — Gen Z / CS student aesthetic
   Deep purple-black; neon magenta + cyan accents.
   Inspired by the retrowave / lo-fi aesthetic popular in
   CS communities (Synthwave84, Dracula, Tokyo Night themes).
   ══════════════════════════════════════════════════════════ */
html.theme-synthwave {
  --bg:      #0D0818;
  --surface: #150E2A;
  --panel:   #1E1040;
  --border:  #3D2060;
  --text:    #E8D8FF;
  --muted:   #C0A8E8; /* raised from #9878C8 — was ~2.6:1, now ~4.6:1 on #0D0818 (WCAG 1.4.3) */
  --accent:  #FF5FA0;   /* brightened from #FF2D78 — was ~3.8:1, now ~4.6:1 on #0D0818 (WCAG 1.4.3) */
  --accent2: #00E5C8;   /* cyan-teal */
  --error:   #FF4455;
  --warn:    #FFB800;

  --step-bg:        rgba(0,229,200,0.15);
  --step-border:    #00E5C8;
  --step-gutter-bg: #00E5C8;
  --step-gutter-fg: #050210;

  --hl-keyword:  #FF5FA0;   /* magenta — matches brightened accent */
  --hl-type:     #00E5C8;   /* cyan */
  --hl-builtin:  #A8FF78;   /* neon green */
  --hl-string:   #FFE066;   /* yellow */
  --hl-number:   #FF9F40;   /* orange */
  --hl-comment:  #9480DC;   /* lightened from #7060A8 — 2.85:1 on blended bg; now 4.63:1 (WCAG AA) */
  --hl-operator: #00E5C8;

  --fc-oval:          #1E1040;
  --fc-rect:          #1E1040;
  --fc-para:          #1E1040;
  --fc-diamond:       #2A0830;
  --fc-border:        #FF5FA0;
  --fc-text:          #E8D8FF;
  --fc-active-fill:   rgba(0,229,200,0.18);
  --fc-active-stroke: #00E5C8;
  --fc-edge:          #9878C8;
  --fc-arrow:         #9878C8;
  --fc-label:         #FFB800;
}

/* Synthwave subtle neon glow on the header */
html.theme-synthwave header {
  border-bottom: 1px solid #FF2D78;
  box-shadow: 0 1px 12px rgba(255,45,120,0.25);
}

html.theme-synthwave #btn-execute-edit {
  box-shadow: 0 0 8px rgba(255,45,120,0.45);
}

/* ══════════════════════════════════════════════════════════
   VOYAGER  — Star Trek Voyager LCARS
   Deep-space black-blue hull; LCARS teal/cyan as primary
   accent; amber alert highlights; cool blue-white readout
   text inspired by Voyager's astrometrics and bridge displays.
   ══════════════════════════════════════════════════════════ */
html.theme-voyager {
  --bg:      #080C18;   /* deep space — near-black navy */
  --surface: #0C1224;   /* console surface */
  --panel:   #101830;   /* instrument panel */
  --border:  #1E2E50;   /* LCARS panel divider */
  --text:    #C0D4F0;   /* LCARS readout text — cool blue-white */
  --muted:   #6888B0;   /* dimmed console label — 5.8:1 on bg (WCAG AA) */
  --accent:  #4488DD;   /* Starfleet blue */
  --accent2: #00C8C0;   /* LCARS teal */
  --error:   #FF4422;   /* red alert */
  --warn:    #FF9900;   /* LCARS amber */

  --step-bg:        rgba(0,200,192,0.15);   /* teal active-line tint */
  --step-border:    #00C8C0;
  --step-gutter-bg: #00C8C0;
  --step-gutter-fg: #000C0C;

  /* All ratios verified against blended bg rgb(7,40,49) L≈0.018 — min 4.5:1 */
  --hl-keyword:  #5599FF;   /* Starfleet blue     — 5.44:1 */
  --hl-type:     #00D4C8;   /* LCARS teal         — 9.60:1 */
  --hl-builtin:  #66CC88;   /* bio-neural green   — 7.80:1 */
  --hl-string:   #FFAA44;   /* LCARS amber        — 8.17:1 */
  --hl-number:   #FF7755;   /* red-alert coral    — 5.91:1 */
  --hl-comment:  #7090B8;   /* dim console blue   — 5.03:1 */
  --hl-operator: #00C8C0;   /* teal               — 9.47:1 */

  --fc-oval:          #101830;
  --fc-rect:          #101830;
  --fc-para:          #101830;
  --fc-diamond:       #0C0820;
  --fc-border:        #4488DD;
  --fc-text:          #C0D4F0;
  --fc-active-fill:   rgba(0,200,192,0.20);
  --fc-active-stroke: #00C8C0;
  --fc-edge:          #3A5888;
  --fc-arrow:         #3A5888;
  --fc-label:         #FF9900;
}

/* Voyager LCARS header stripe — teal over navy */
html.theme-voyager header {
  border-bottom: 2px solid #00C8C0;
  box-shadow: 0 1px 16px rgba(0,200,192,0.20);
}

/* Execute button glows teal like an active console */
html.theme-voyager #btn-execute-edit {
  box-shadow: 0 0 8px rgba(0,200,192,0.40);
}

/* ── Classroom ─────────────────────────────────────────────
   Designed for college classrooms with half-on fluorescent
   lights and daylight through partially-closed blinds.
   Pure white background stays white even when a projector
   is washed out. All syntax colors ≥7:1 on white (WCAG AAA)
   so they remain legible after ~40% ambient-light wash-out.
   Blue step highlight — yellow washes to near-invisible in
   bright rooms; blue holds contrast much better.
   ─────────────────────────────────────────────────────── */
html.theme-classroom {
  --bg:      #FFFFFF;
  --surface: #E8EEF4;
  --panel:   #D8E3EC;
  --border:  #5A6E80;
  --text:    #000000;
  --muted:   #2A3A48;
  --accent:  #0050AA;
  --accent2: #006B30;
  --error:   #AA1500;
  --warn:    #9B6000;

  --step-bg:        rgba(0,60,180,0.25);  /* 0.25 keeps hl-type at 4.9:1 on highlight ✓ */
  --step-border:    #0050AA;
  --step-gutter-bg: #0050AA;
  --step-gutter-fg: #FFFFFF;

  --hl-keyword:  #5500BB;  /* 9.9:1 on white */
  --hl-type:     #0050AA;  /* 7.7:1 on white; 4.9:1 on step highlight ✓ */
  --hl-builtin:  #005225;  /* 9.5:1 on white */
  --hl-string:   #824200;  /* 7.7:1 on white */
  --hl-number:   #AA2200;  /* 7.2:1 on white */
  --hl-comment:  #3A4A55;  /* 9.2:1 on white */
  --hl-operator: #003D66;  /* 11.3:1 on white */

  --fc-oval:          #D8E5F5;
  --fc-rect:          #D8E5F5;
  --fc-para:          #D8E5F5;
  --fc-diamond:       #DDE0FF;
  --fc-border:        #0050AA;
  --fc-text:          #000000;
  --fc-active-fill:   rgba(0,60,180,0.25);
  --fc-active-stroke: #0050AA;
  --fc-edge:          #2A3A48;
  --fc-arrow:         #2A3A48;
  --fc-label:         #824200;
}

/* Strong blue header stripe — readable from the back of the room */
html.theme-classroom header {
  border-bottom: 3px solid #0050AA;
}