/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Dark theme — Midnight Grimoire ── */
:root {
    --bg-deep: #06060f;
    --bg-surface: #0c0c1a;
    --bg-card: #111125;
    --bg-hover: #1a1a38;
    --border: #252545;
    --border-accent: #3a3a6a;
    --text-primary: #e8e2f4;
    --text-secondary: #9e96b8;
    --text-muted: #5e5880;
    --gold: #d4a844;
    --gold-dim: rgba(212, 168, 68, 0.12);
    --gold-border: rgba(212, 168, 68, 0.30);
    --gold-glow: rgba(212, 168, 68, 0.08);
    --violet: #8b5cf6;
    --violet-dim: rgba(139, 92, 246, 0.10);
    --violet-border: rgba(139, 92, 246, 0.25);
    --violet-glow: rgba(139, 92, 246, 0.06);
    --emerald: #34d399;
    --emerald-dim: rgba(52, 211, 153, 0.08);
    --emerald-border: rgba(52, 211, 153, 0.20);
    --crimson: #e85d5d;
    --crimson-glow: rgba(232, 93, 93, 0.10);
    --card-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
    --glow-color: rgba(139, 92, 246, 0.08);
    --star-opacity: 1;
    --noise-opacity: 0.03;
    --sigil-opacity: 0.035;
}

/* ── Light theme — Parchemin clair ── */
[data-theme="light"] {
    --bg-deep: #f4ead7;
    --bg-surface: #ede0c4;
    --bg-card: #faf2de;
    --bg-hover: #e6d8b8;
    --border: #c9b794;
    --border-accent: #b8a06b;
    --text-primary: #2a1f0e;
    --text-secondary: #5a4730;
    --text-muted: #8a7553;
    --gold: #a8761a;
    --gold-dim: rgba(168, 118, 26, 0.18);
    --gold-border: rgba(168, 118, 26, 0.45);
    --gold-glow: rgba(168, 118, 26, 0.15);
    --violet: #6d3fb5;
    --violet-dim: rgba(109, 63, 181, 0.10);
    --violet-border: rgba(109, 63, 181, 0.30);
    --violet-glow: rgba(109, 63, 181, 0.08);
    --emerald: #2c8a5e;
    --emerald-dim: rgba(44, 138, 94, 0.10);
    --emerald-border: rgba(44, 138, 94, 0.25);
    --crimson: #b03838;
    --crimson-glow: rgba(176, 56, 56, 0.10);
    --card-shadow: 0 4px 30px rgba(60, 40, 20, 0.18);
    --glow-color: rgba(168, 118, 26, 0.12);
    --star-opacity: 0.35;
    --noise-opacity: 0.05;
    --sigil-opacity: 0.06;
}

/* ── Base ── */
html { scroll-behavior: smooth; }

body {
    font-family: 'Bitter', 'Crimson Pro', serif;
    background: var(--bg-deep);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.65;
    overflow-x: hidden;
    position: relative;
}