/* ═══════════════════════════════════════════
   LP TEACHER — CSS Custom Properties
   ═══════════════════════════════════════════ */

:root {
  /* ── Backgrounds ── */
  --bg-app:     #eef0ff;
  --bg-panel:   #ffffff;
  --bg-surface: #f4f5ff;
  --bg-hover:   #eaecff;
  --bg-input:   #ffffff;

  /* ── Text ── */
  --text-h:     #1a1a2e;
  --text-body:  #3c3c60;
  --text-sub:   #6464a0;
  --text-muted: #9a9abc;

  /* ── Accent ── */
  --accent:        #5c6ef8;
  --accent-hov:    #4a5ae6;
  --accent-light:  rgba(92, 110, 248, 0.13);
  --accent-light-fg: #5c6ef8;
  --accent-grad:   linear-gradient(135deg, #5c6ef8 0%, #a78bfa 100%);

  /* ── Semantic ── */
  --green:       #22c55e;
  --green-bg:    rgba(34, 197, 94, 0.12);
  --red:         #ef4444;
  --red-bg:      rgba(239, 68, 68, 0.12);
  --amber:       #f59e0b;
  --amber-bg:    rgba(245, 158, 11, 0.12);
  --violet:      #a78bfa;

  /* ── Borders & Shadows ── */
  --border:      #dce0ff;
  --border-foc:  #5c6ef8;
  --shadow-xs:   0 1px 3px rgba(92, 110, 248, 0.07);
  --shadow-sm:   0 2px 8px rgba(92, 110, 248, 0.11);
  --shadow-md:   0 4px 16px rgba(92, 110, 248, 0.15);

  /* ── Constraint palette (1–8) ── */
  --c1: #f43f5e;   --c1-bg: rgba(244, 63, 94, 0.1);
  --c2: #f97316;   --c2-bg: rgba(249, 115, 22, 0.1);
  --c3: #eab308;   --c3-bg: rgba(234, 179, 8, 0.1);
  --c4: #16a34a;   --c4-bg: rgba(22, 163, 74, 0.1);
  --c5: #0891b2;   --c5-bg: rgba(8, 145, 178, 0.1);
  --c6: #2563eb;   --c6-bg: rgba(37, 99, 235, 0.1);
  --c7: #7c3aed;   --c7-bg: rgba(124, 58, 237, 0.1);
  --c8: #db2777;   --c8-bg: rgba(219, 39, 119, 0.1);

  /* ── Layout ── */
  --header-h:    52px;
  --r-panel:     14px;
  --r-md:        10px;
  --r-sm:        6px;

  /* ── Transitions ── */
  --t-fast: 0.12s ease;
  --t-mid:  0.22s ease;

  /* ── Fonts ── */
  --font:      'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'Fira Code', 'JetBrains Mono', monospace;
}

/* ── Dark Theme ─────────────────────────── */
.dark-theme {
  --bg-app:     #0c0c1a;
  --bg-panel:   #13132a;
  --bg-surface: #191930;
  --bg-hover:   #1d1d38;
  --bg-input:   #13132a;

  --text-h:     #e8e8ff;
  --text-body:  #aaaace;
  --text-sub:   #6868a8;
  --text-muted: #444478;

  --accent:       #818cf8;
  --accent-hov:   #929dff;
  --accent-light: rgba(129, 140, 248, 0.14);
  --accent-light-fg: #818cf8;
  --accent-grad:  linear-gradient(135deg, #818cf8 0%, #c4b5fd 100%);

  --green:    #4ade80; --green-bg:  rgba(74, 222, 128, 0.12);
  --red:      #f87171; --red-bg:    rgba(248, 113, 113, 0.12);
  --amber:    #fbbf24; --amber-bg:  rgba(251, 191, 36, 0.12);
  --violet:   #c4b5fd;

  --border:     #22224a;
  --border-foc: #818cf8;
  --shadow-xs:  0 1px 3px rgba(0,0,0,0.25);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.35);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.45);

  --c1: #fb7185;  --c1-bg: rgba(251,113,133,0.12);
  --c2: #fb923c;  --c2-bg: rgba(251,146,60,0.12);
  --c3: #fbbf24;  --c3-bg: rgba(251,191,36,0.12);
  --c4: #4ade80;  --c4-bg: rgba(74,222,128,0.12);
  --c5: #22d3ee;  --c5-bg: rgba(34,211,238,0.12);
  --c6: #60a5fa;  --c6-bg: rgba(96,165,250,0.12);
  --c7: #a78bfa;  --c7-bg: rgba(167,139,250,0.12);
  --c8: #f472b6;  --c8-bg: rgba(244,114,182,0.12);
}