/* Zenith viewer themes.
   Every colour in zenith.css resolves through these tokens, so a theme is
   just one block here. Pick one with ?theme=<id>, the picker in the top
   bar, or change DEFAULT_THEME in js/theme.js. */

:root,
:root[data-theme="zenith-dark"] {
  color-scheme: dark;
  --bg: #0a0a0b;
  --bg-2: #0f0f11;
  --panel: rgba(20, 20, 23, 0.78);
  --panel-solid: #111113;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.13);
  --text: #ededf0;
  --text-2: #a1a1a9;
  --text-3: #67676f;
  --text-strong: #ffffff;
  --on-accent: #140a04;
  --accent: #ff7a2e;
  --accent-2: #38c8f0;
  --live: #ff4757;
  --ok: #3ddc84;
  --warn: #ffc53d;
  --muted: #a1a1a9;
  --tint: #ffffff;
  --field: rgba(0, 0, 0, 0.4);
  --shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.8);
}

:root[data-theme="aurora"] {
  color-scheme: dark;
  --bg: #07060b;
  --bg-2: #0e0b15;
  --panel: rgba(24, 19, 34, 0.74);
  --panel-solid: #15111f;
  --line: rgba(179, 168, 201, 0.12);
  --line-strong: rgba(179, 168, 201, 0.22);
  --text: #f1ecf9;
  --text-2: #b3a8c9;
  --text-3: #6f6485;
  --text-strong: #ffffff;
  --on-accent: #07060b;
  --accent: #4ade80;
  --accent-2: #f472b6;
  --live: #fb7185;
  --ok: #4ade80;
  --warn: #facc15;
  --muted: #b3a8c9;
  --tint: #ffffff;
  --field: rgba(0, 0, 0, 0.35);
  --shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.75);
}

:root[data-theme="studio-light"] {
  color-scheme: light;
  --bg: #eef1f6;
  --bg-2: #f7f9fc;
  --panel: rgba(255, 255, 255, 0.86);
  --panel-solid: #ffffff;
  --line: rgba(15, 23, 42, 0.09);
  --line-strong: rgba(15, 23, 42, 0.16);
  --text: #101623;
  --text-2: #4a5568;
  --text-3: #8390a5;
  --text-strong: #0b1220;
  --on-accent: #ffffff;
  --accent: #0891b2;
  --accent-2: #7c3aed;
  --live: #e11d48;
  --ok: #059669;
  --warn: #d97706;
  --muted: #64748b;
  --tint: #0f172a;
  --field: #ffffff;
  --shadow: 0 18px 50px -24px rgba(15, 23, 42, 0.35);
}