/* Extra themes. Each one is a complete token set plus an "atmosphere": --glow, --bg-image, shape and heading font. */

:root[data-theme="neon-grid"] {
  --bg: #060a14; --surface: #0d1424; --surface-2: #131c31;
  --text: #e6f4ff; --muted: #8fa6c4; --border: #22304d;
  --accent: #00e5ff; --accent-ink: #00252b; --accent-soft: #08303a;
  --ok: #3dffa0; --warn: #ffb02e; --danger: #ff5c7a; --danger-soft: #3a1020; --focus: #7df9ff;
  --shadow: 0 0 0 1px rgba(0, 229, 255, 0.2), 0 8px 28px rgba(0, 0, 0, 0.5);
  --glow: 0 0 0 1px rgba(0, 229, 255, 0.22), 0 0 22px rgba(0, 229, 255, 0.1);
  --bg-image: linear-gradient(rgba(0, 229, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 229, 255, 0.05) 1px, transparent 1px);
  --bg-size: 32px 32px;
  --radius: 3px; --radius-sm: 2px; --font-display: var(--mono);
  --accent-2: #b794ff;
  --aura: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  --edge: color-mix(in srgb, var(--accent) 50%, var(--border));
  --rail-bg: #080e1c;
  color-scheme: dark;
}

:root[data-theme="aurora"] {
  --bg: #0a0719; --surface: #130f2b; --surface-2: #1a1538;
  --text: #efeaff; --muted: #a99fd1; --border: #2c2556;
  --accent: #5cffb0; --accent-ink: #04271a; --accent-soft: #0f3a3a;
  --ok: #5cffb0; --warn: #ffc857; --danger: #ff7a9c; --danger-soft: #3a1030; --focus: #b9a7ff;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  --glow: 0 0 32px rgba(92, 255, 176, 0.1);
  --bg-image: radial-gradient(900px 500px at 85% -10%, rgba(124, 92, 255, 0.35), transparent 60%), radial-gradient(700px 400px at -10% 110%, rgba(92, 255, 176, 0.18), transparent 60%);
  --bg-size: auto;
  --radius: 14px; --radius-sm: 10px;
  --accent-2: #9d8bff;
  --aura: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  --edge: color-mix(in srgb, var(--accent) 40%, var(--border));
  --rail-bg: #0e0a22;
  color-scheme: dark;
}

:root[data-theme="hologram"] {
  --bg: #e9f1fb; --surface: #ffffff; --surface-2: #f2f7ff;
  --text: #0b1633; --muted: #475a7a; --border: #c5d4ec;
  --accent: #1747ff; --accent-ink: #ffffff; --accent-soft: #dde6ff;
  --ok: #0b7a45; --warn: #a14a00; --danger: #c0172f; --danger-soft: #ffe3e8; --focus: #7a3cff;
  --shadow: 0 8px 32px rgba(23, 71, 255, 0.12);
  --glow: 0 0 0 1px rgba(23, 71, 255, 0.12), 0 8px 32px rgba(23, 71, 255, 0.1);
  --bg-image: linear-gradient(135deg, #e9f1fb 0%, #dfe8ff 45%, #efe4ff 100%);
  --bg-size: auto;
  --radius: 12px; --radius-sm: 8px;
  --accent-2: #b01fa3;
  --aura: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  --edge: color-mix(in srgb, var(--accent) 35%, var(--border));
  --rail-bg: #f4f8ff;
  color-scheme: light;
}

:root[data-theme="ember-core"] {
  --bg: #0f0907; --surface: #1a100c; --surface-2: #241611;
  --text: #fff1e8; --muted: #c9a898; --border: #3d251b;
  --accent: #ff7a1a; --accent-ink: #2a1000; --accent-soft: #3a1c0c;
  --ok: #7bdc8a; --warn: #ffd24a; --danger: #ff6b5e; --danger-soft: #3d1512; --focus: #ffb36b;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
  --glow: 0 0 28px rgba(255, 122, 26, 0.12);
  --bg-image: radial-gradient(800px 420px at 100% 0%, rgba(255, 122, 26, 0.18), transparent 60%);
  --bg-size: auto;
  --radius: 6px; --radius-sm: 4px;
  --accent-2: #ffc247;
  --aura: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  --edge: color-mix(in srgb, var(--accent) 45%, var(--border));
  --rail-bg: #140b08;
  color-scheme: dark;
}

:root[data-theme="quantum"] {
  --bg: #070b24; --surface: #0e1538; --surface-2: #151e4a;
  --text: #eaedff; --muted: #9aa6e0; --border: #27337a;
  --accent: #7c8cff; --accent-ink: #0a0f33; --accent-soft: #1d2766;
  --ok: #5ee6a8; --warn: #ffc266; --danger: #ff7a8a; --danger-soft: #3a1530; --focus: #b4bdff;
  --shadow: 0 0 0 1px rgba(124, 140, 255, 0.3), 0 8px 30px rgba(0, 0, 0, 0.5);
  --glow: 0 0 0 1px rgba(124, 140, 255, 0.3), 0 0 36px rgba(124, 140, 255, 0.15);
  --bg-image: radial-gradient(rgba(124, 140, 255, 0.18) 1px, transparent 1px);
  --bg-size: 24px 24px;
  --radius: 2px; --radius-sm: 2px; --font-display: var(--mono);
  --accent-2: #5ee6d6;
  --aura: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  --edge: color-mix(in srgb, var(--accent) 50%, var(--border));
  --rail-bg: #0a1030;
  color-scheme: dark;
}

/* Deep Space: a black sky with a nebula glow in two corners and a field of stars at two depths. */
:root[data-theme="deep-space"] {
  --bg: #03050d; --surface: #0a0f20; --surface-2: #111a35;
  --text: #eef2ff; --muted: #a3b2d9; --border: #222f58;
  --accent: #ffcf6e; --accent-ink: #1a1200; --accent-soft: #2e2510;
  --ok: #6fe3b0; --warn: #ffb454; --danger: #ff7b8e; --danger-soft: #3a1426; --focus: #9ad8ff;
  --shadow: 0 10px 34px rgba(0, 0, 0, 0.65);
  --glow: 0 0 0 1px rgba(154, 216, 255, 0.18), 0 0 40px rgba(124, 92, 255, 0.14);
  --bg-image:
    radial-gradient(900px 520px at 0% 0%, rgba(124, 92, 255, 0.22), transparent 62%),
    radial-gradient(760px 480px at 100% 100%, rgba(0, 196, 230, 0.14), transparent 60%),
    radial-gradient(2.1px 2.1px at 38px 52px, rgba(255, 255, 255, 0.95), transparent 100%),
    radial-gradient(1.8px 1.8px at 190px 24px, rgba(255, 255, 255, 0.75), transparent 100%),
    radial-gradient(2.4px 2.4px at 262px 150px, rgba(255, 233, 190, 0.95), transparent 100%),
    radial-gradient(1.8px 1.8px at 96px 214px, rgba(190, 215, 255, 0.8), transparent 100%),
    radial-gradient(1.8px 1.8px at 320px 280px, rgba(255, 255, 255, 0.7), transparent 100%),
    radial-gradient(2px 2px at 150px 330px, rgba(255, 255, 255, 0.85), transparent 100%),
    radial-gradient(1.8px 1.8px at 410px 60px, rgba(255, 255, 255, 0.6), transparent 100%),
    radial-gradient(2.6px 2.6px at 520px 370px, rgba(255, 244, 214, 0.95), transparent 100%),
    radial-gradient(1.8px 1.8px at 470px 210px, rgba(190, 215, 255, 0.7), transparent 100%),
    radial-gradient(1.8px 1.8px at 570px 120px, rgba(255, 255, 255, 0.65), transparent 100%);
  --bg-size: auto, auto, 360px 360px, 360px 360px, 360px 360px, 360px 360px, 360px 360px, 360px 360px, 620px 420px,
    620px 420px, 620px 420px, 620px 420px;
  --radius: 14px; --radius-sm: 8px;
  --accent-2: #b6a2ff;
  --aura: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  --edge: color-mix(in srgb, var(--accent) 40%, var(--border));
  --rail-bg: #060a18;
  color-scheme: dark;
}

/* Theme swatches for the picker: a copy of four tokens per theme (tests/test_ui_redesign.py keeps them in sync). */
[data-swatch="light"] { --sw-bg: #f1f4f6; --sw-surface: #ffffff; --sw-accent: #0b6e7a; --sw-accent-2: #5b3fd1; }
[data-swatch="dark"] { --sw-bg: #0d151b; --sw-surface: #15212a; --sw-accent: #52c2cf; --sw-accent-2: #a99bff; }
[data-swatch="neon-grid"] { --sw-bg: #060a14; --sw-surface: #0d1424; --sw-accent: #00e5ff; --sw-accent-2: #b794ff; }
[data-swatch="aurora"] { --sw-bg: #0a0719; --sw-surface: #130f2b; --sw-accent: #5cffb0; --sw-accent-2: #9d8bff; }
[data-swatch="hologram"] { --sw-bg: #e9f1fb; --sw-surface: #ffffff; --sw-accent: #1747ff; --sw-accent-2: #b01fa3; }
[data-swatch="ember-core"] { --sw-bg: #0f0907; --sw-surface: #1a100c; --sw-accent: #ff7a1a; --sw-accent-2: #ffc247; }
[data-swatch="quantum"] { --sw-bg: #070b24; --sw-surface: #0e1538; --sw-accent: #7c8cff; --sw-accent-2: #5ee6d6; }
[data-swatch="deep-space"] { --sw-bg: #03050d; --sw-surface: #0a0f20; --sw-accent: #ffcf6e; --sw-accent-2: #b6a2ff; }