:root,
[data-accent="indigo"]   { --hue: 275; --chroma: 0.19; --tint: 0.010; }
[data-accent="ocean"]    { --hue: 235; --chroma: 0.17; --tint: 0.010; }
[data-accent="teal"]     { --hue: 190; --chroma: 0.13; --tint: 0.008; }
[data-accent="emerald"]  { --hue: 155; --chroma: 0.15; --tint: 0.008; }
[data-accent="amber"]    { --hue: 65;  --chroma: 0.16; --tint: 0.010; }
[data-accent="coral"]    { --hue: 25;  --chroma: 0.18; --tint: 0.010; }
[data-accent="rose"]     { --hue: 350; --chroma: 0.18; --tint: 0.010; }
[data-accent="violet"]   { --hue: 305; --chroma: 0.18; --tint: 0.010; }
[data-accent="graphite"] { --hue: 260; --chroma: 0.02; --tint: 0.004; }

/* ── Light ─────────────────────────────────────────────────────────────────── */
:root {
  --radius: 0.75rem;

  --background: oklch(98.2% var(--tint) var(--hue));
  --surface: oklch(100% 0 0);
  --surface-2: oklch(96.5% var(--tint) var(--hue));
  --surface-3: oklch(93.5% calc(var(--tint) * 1.5) var(--hue));
  --border: oklch(90% calc(var(--tint) * 1.6) var(--hue));
  --border-strong: oklch(82% calc(var(--tint) * 2) var(--hue));

  --foreground: oklch(20% 0.02 var(--hue));
  --muted: oklch(48% 0.025 var(--hue));
  --faint: oklch(66% 0.02 var(--hue));

  --primary: oklch(50% var(--chroma) var(--hue));
  --primary-hover: oklch(44% var(--chroma) var(--hue));
  --primary-foreground: oklch(99% 0 0);
  --primary-soft: oklch(94% calc(var(--chroma) * 0.32) var(--hue));
  --primary-soft-fg: oklch(38% var(--chroma) var(--hue));
  --ring: oklch(62% var(--chroma) var(--hue) / 0.55);

  --success: oklch(58% 0.16 150);
  --warning: oklch(70% 0.16 70);
  --danger: oklch(56% 0.2 25);
  --info: oklch(58% 0.15 235);
  --success-soft: oklch(94% 0.06 150);
  --warning-soft: oklch(95% 0.07 80);
  --danger-soft: oklch(94% 0.06 25);
  --info-soft: oklch(94% 0.05 235);

  --shadow-sm: 0 1px 2px oklch(20% 0.02 var(--hue) / 0.06);
  --shadow: 0 1px 3px oklch(20% 0.02 var(--hue) / 0.08), 0 8px 24px -12px oklch(20% 0.02 var(--hue) / 0.18);
  --shadow-lg: 0 24px 60px -24px oklch(20% 0.05 var(--hue) / 0.35);

  /* Speaker lanes – hues spread around the wheel, kept away from status colours. */
  --speaker-0: oklch(58% 0.17 265);
  --speaker-1: oklch(62% 0.17 25);
  --speaker-2: oklch(60% 0.14 165);
  --speaker-3: oklch(66% 0.16 70);
  --speaker-4: oklch(60% 0.17 320);
  --speaker-5: oklch(60% 0.14 210);
  --speaker-6: oklch(56% 0.16 350);
  --speaker-7: oklch(58% 0.12 120);

  /* Topic bands – soft, cycling. */
  --topic-0: oklch(88% 0.08 var(--hue));
  --topic-1: oklch(88% 0.07 calc(var(--hue) + 60));
  --topic-2: oklch(88% 0.07 calc(var(--hue) + 120));
  --topic-3: oklch(88% 0.07 calc(var(--hue) + 180));
  --topic-4: oklch(88% 0.07 calc(var(--hue) + 240));
  --topic-5: oklch(88% 0.07 calc(var(--hue) + 300));

  color-scheme: light;
}

/* ── Dark ──────────────────────────────────────────────────────────────────── */
[data-mode="dark"] {
  --background: oklch(15% calc(var(--tint) * 1.5) var(--hue));
  --surface: oklch(19% calc(var(--tint) * 1.6) var(--hue));
  --surface-2: oklch(23% calc(var(--tint) * 1.8) var(--hue));
  --surface-3: oklch(28% calc(var(--tint) * 2) var(--hue));
  --border: oklch(28% calc(var(--tint) * 2) var(--hue));
  --border-strong: oklch(38% calc(var(--tint) * 2.5) var(--hue));

  --foreground: oklch(95% 0.008 var(--hue));
  --muted: oklch(70% 0.02 var(--hue));
  --faint: oklch(52% 0.02 var(--hue));

  --primary: oklch(72% calc(var(--chroma) * 0.9) var(--hue));
  --primary-hover: oklch(78% calc(var(--chroma) * 0.9) var(--hue));
  --primary-foreground: oklch(14% 0.03 var(--hue));
  --primary-soft: oklch(30% calc(var(--chroma) * 0.4) var(--hue));
  --primary-soft-fg: oklch(85% calc(var(--chroma) * 0.6) var(--hue));
  --ring: oklch(72% var(--chroma) var(--hue) / 0.6);

  --success: oklch(74% 0.15 150);
  --warning: oklch(80% 0.15 75);
  --danger: oklch(70% 0.18 25);
  --info: oklch(74% 0.13 235);
  --success-soft: oklch(28% 0.06 150);
  --warning-soft: oklch(30% 0.07 80);
  --danger-soft: oklch(28% 0.07 25);
  --info-soft: oklch(28% 0.06 235);

  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.4);
  --shadow: 0 1px 3px oklch(0% 0 0 / 0.5), 0 8px 24px -12px oklch(0% 0 0 / 0.6);
  --shadow-lg: 0 24px 60px -24px oklch(0% 0 0 / 0.8);

  --speaker-0: oklch(74% 0.14 265);
  --speaker-1: oklch(76% 0.15 25);
  --speaker-2: oklch(76% 0.13 165);
  --speaker-3: oklch(80% 0.14 70);
  --speaker-4: oklch(76% 0.15 320);
  --speaker-5: oklch(76% 0.12 210);
  --speaker-6: oklch(74% 0.14 350);
  --speaker-7: oklch(76% 0.11 120);

  --topic-0: oklch(36% 0.08 var(--hue));
  --topic-1: oklch(36% 0.07 calc(var(--hue) + 60));
  --topic-2: oklch(36% 0.07 calc(var(--hue) + 120));
  --topic-3: oklch(36% 0.07 calc(var(--hue) + 180));
  --topic-4: oklch(36% 0.07 calc(var(--hue) + 240));
  --topic-5: oklch(36% 0.07 calc(var(--hue) + 300));

  color-scheme: dark;
}