/* ============================================================
   themes.css — palettes. Each theme is a set of CSS vars applied
   to a .slide via [data-theme]. Layouts read only these tokens,
   so a single layout renders in dozens of distinct looks.
   ============================================================ */

.slide {
  --font-display: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
  --radius: 22px;

  /* sensible fallback tokens (overridden per theme) */
  --bg: #0e1020;
  --bg-2: #171a30;
  --ink: #f4f6ff;
  --ink-2: #c9cee8;
  --muted: #8b90ad;
  --line: rgba(255,255,255,0.12);
  --surface: rgba(255,255,255,0.06);
  --surface-2: rgba(255,255,255,0.1);
  --a1: #7c5cff;
  --a2: #ff5cc8;
  --a3: #43e0c0;
  --deco: rgba(124,92,255,0.5);
  --glow: rgba(124,92,255,0.45);
  --on-accent: #ffffff;

  color: var(--ink);
  font-family: var(--font-body);
  background: var(--bg);
}
.slide::before { /* base wash */
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(1100px 620px at 12% -12%, var(--bg-2) 0%, transparent 60%),
    radial-gradient(900px 640px at 108% 6%, var(--bg-2) 0%, transparent 58%);
  opacity: 0.9;
}

/* ---------- INTRO / BRAND ---------- */
.slide[data-theme="aurora"] { --bg:#0d0a24; --bg-2:#241653; --ink:#f6f4ff; --ink-2:#d5cffb; --muted:#9d97c8; --a1:#8b6bff; --a2:#ff6bd0; --a3:#5ce1c4; --deco:rgba(139,107,255,0.55); --glow:rgba(139,107,255,0.5); --line:rgba(255,255,255,0.12); --surface:rgba(255,255,255,0.06); --surface-2:rgba(255,255,255,0.11); }
.slide[data-theme="nebula"] { --bg:#0a0f2b; --bg-2:#15235c; --ink:#eef3ff; --ink-2:#c2d0f5; --muted:#8894c0; --a1:#5b8bff; --a2:#c46bff; --a3:#41d7ff; --deco:rgba(91,139,255,0.5); --glow:rgba(91,139,255,0.5); }

/* ---------- BEGINNER — warm, friendly, rounded ---------- */
.slide[data-theme="sunrise"] { --bg:#fff6ee; --bg-2:#ffe6d2; --ink:#3a2415; --ink-2:#7a5638; --muted:#a98a6f; --a1:#ff7a3d; --a2:#ff477e; --a3:#ffb43d; --line:rgba(58,36,21,0.12); --surface:rgba(255,255,255,0.7); --surface-2:#ffffff; --deco:rgba(255,122,61,0.35); --glow:rgba(255,122,61,0.35); --on-accent:#fff; }
.slide[data-theme="mint"] { --bg:#f0fbf6; --bg-2:#d4f4e6; --ink:#123328; --ink-2:#3d6a58; --muted:#77998c; --a1:#12b981; --a2:#0ea5b7; --a3:#7cd66b; --line:rgba(18,51,40,0.1); --surface:rgba(255,255,255,0.75); --surface-2:#ffffff; --deco:rgba(18,185,129,0.3); --glow:rgba(18,185,129,0.3); --on-accent:#fff; }
.slide[data-theme="coral"] { --bg:#fff3f4; --bg-2:#ffdfe3; --ink:#3d1720; --ink-2:#814650; --muted:#b07f87; --a1:#ff5470; --a2:#ff8f5c; --a3:#ffca4f; --line:rgba(61,23,32,0.1); --surface:rgba(255,255,255,0.72); --surface-2:#ffffff; --deco:rgba(255,84,112,0.3); --glow:rgba(255,84,112,0.3); --on-accent:#fff; }
.slide[data-theme="sky"] { --bg:#eef7ff; --bg-2:#d3e9ff; --ink:#132a45; --ink-2:#3f628a; --muted:#7d93b3; --a1:#2f8bff; --a2:#5ec8ff; --a3:#8b6bff; --line:rgba(19,42,69,0.1); --surface:rgba(255,255,255,0.75); --surface-2:#ffffff; --deco:rgba(47,139,255,0.28); --glow:rgba(47,139,255,0.3); --on-accent:#fff; }
.slide[data-theme="lemon"] { --bg:#fffdf0; --bg-2:#fdf3c9; --ink:#38310f; --ink-2:#786a34; --muted:#a89a63; --a1:#e6a800; --a2:#ff8a3d; --a3:#5cc98a; --line:rgba(56,49,15,0.12); --surface:rgba(255,255,255,0.7); --surface-2:#ffffff; --deco:rgba(230,168,0,0.3); --glow:rgba(230,168,0,0.32); --on-accent:#38310f; }

/* ---------- INTERMEDIATE — cool, technical ---------- */
.slide[data-theme="ocean"] { --bg:#071b2e; --bg-2:#0c3350; --ink:#eafaff; --ink-2:#b3d8ea; --muted:#7ba0b6; --a1:#22c1e6; --a2:#3b82f6; --a3:#38e0b0; --deco:rgba(34,193,230,0.4); --glow:rgba(34,193,230,0.45); }
.slide[data-theme="cobalt"] { --bg:#0a1230; --bg-2:#182a63; --ink:#eef1ff; --ink-2:#c0caf5; --muted:#8590c0; --a1:#4f7bff; --a2:#7c5cff; --a3:#39d0ff; --deco:rgba(79,123,255,0.42); --glow:rgba(79,123,255,0.45); }
.slide[data-theme="teal"] { --bg:#052620; --bg-2:#0b453a; --ink:#e8fff8; --ink-2:#aee6d6; --muted:#77aa9c; --a1:#17d3a0; --a2:#2bb6d8; --a3:#a3e635; --deco:rgba(23,211,160,0.4); --glow:rgba(23,211,160,0.42); }
.slide[data-theme="grape"] { --bg:#1a0b2e; --bg-2:#3a1663; --ink:#f6eeff; --ink-2:#d5c2f0; --muted:#a186c0; --a1:#a855f7; --a2:#e879f9; --a3:#60a5fa; --deco:rgba(168,85,247,0.42); --glow:rgba(168,85,247,0.45); }
.slide[data-theme="forest"] { --bg:#0b1e12; --bg-2:#153a22; --ink:#eafff0; --ink-2:#b6e2c4; --muted:#7fa88b; --a1:#34d399; --a2:#a3e635; --a3:#22d3ee; --deco:rgba(52,211,153,0.4); --glow:rgba(52,211,153,0.42); }
.slide[data-theme="slate"] { --bg:#0f1620; --bg-2:#1e2b3d; --ink:#eef3fa; --ink-2:#bccadd; --muted:#829ab4; --a1:#38bdf8; --a2:#818cf8; --a3:#2dd4bf; --deco:rgba(56,189,248,0.36); --glow:rgba(56,189,248,0.4); }

/* ---------- ADVANCED — dark, neon, sophisticated ---------- */
.slide[data-theme="midnight"] { --bg:#05060f; --bg-2:#0e1330; --ink:#eef1ff; --ink-2:#b6bde0; --muted:#7a80a8; --a1:#6d7bff; --a2:#c15bff; --a3:#33e6c0; --line:rgba(255,255,255,0.1); --deco:rgba(109,123,255,0.42); --glow:rgba(109,123,255,0.5); }
.slide[data-theme="neon"] { --bg:#060a0a; --bg-2:#0c1a1a; --ink:#eafffb; --ink-2:#aef0e4; --muted:#6fa398; --a1:#00ffc6; --a2:#00d0ff; --a3:#ff2ea6; --line:rgba(0,255,198,0.14); --deco:rgba(0,255,198,0.36); --glow:rgba(0,255,198,0.4); --on-accent:#04211b; }
.slide[data-theme="carbon"] { --bg:#0a0a0c; --bg-2:#17171d; --ink:#f2f2f5; --ink-2:#c3c3cc; --muted:#83838f; --a1:#ff7847; --a2:#ffd23f; --a3:#ff4d7d; --line:rgba(255,255,255,0.09); --deco:rgba(255,120,71,0.34); --glow:rgba(255,120,71,0.4); }
.slide[data-theme="plasma"] { --bg:#0c0518; --bg-2:#2a0f42; --ink:#fbeeff; --ink-2:#e0c2f5; --muted:#a67fc0; --a1:#ff3df0; --a2:#8b5cff; --a3:#3df0ff; --line:rgba(255,61,240,0.14); --deco:rgba(255,61,240,0.34); --glow:rgba(255,61,240,0.42); }
.slide[data-theme="matrix"] { --bg:#04100a; --bg-2:#0a2417; --ink:#e7ffef; --ink-2:#a7e6bf; --muted:#68a483; --a1:#39ff88; --a2:#12d0a0; --a3:#c9ff3d; --line:rgba(57,255,136,0.14); --deco:rgba(57,255,136,0.32); --glow:rgba(57,255,136,0.4); --on-accent:#04170d; }
.slide[data-theme="voltage"] { --bg:#0a0713; --bg-2:#1c1140; --ink:#f1eeff; --ink-2:#cbc2f5; --muted:#8f83c0; --a1:#ffe14d; --a2:#8b5cff; --a3:#4dd0ff; --line:rgba(255,225,77,0.12); --deco:rgba(255,225,77,0.3); --glow:rgba(255,225,77,0.36); --on-accent:#0a0713; }

/* Light themes get darker chrome-safe surfaces already set above. */