/* =============================================================================
   Alternate themes. Only token overrides, so switching is one attribute change
   and every transition in the system animates the swap.
   ============================================================================= */

@layer themes {

  /* ---- Neon: deeper black, louder chroma, sharper glow, cyber edges */
  .app[data-theme="neon"] {
    --hue-2: calc(var(--hue) + 140);
    --hue-3: calc(var(--hue) - 70);

    --bg:         oklch(9% 0.03 var(--hue-2));
    --bg-raise:   oklch(13% 0.04 var(--hue-2));
    --accent:     oklch(86% 0.19 var(--hue));
    --accent-2:   oklch(70% 0.25 var(--hue-2));
    --accent-3:   oklch(80% 0.18 var(--hue-3));
    --accent-ink: oklch(12% 0.05 var(--hue));
    --accent-line: color-mix(in oklch, var(--accent) 65%, transparent);

    --aurora-1: oklch(60% 0.24 var(--hue) / 0.5);
    --aurora-2: oklch(50% 0.28 var(--hue-2) / 0.6);
    --aurora-3: oklch(60% 0.22 var(--hue-3) / 0.3);
    --aurora-4: oklch(40% 0.2 calc(var(--hue) + 200) / 0.4);
    --grain-opacity: 0.1;

    --border:        color-mix(in oklch, var(--accent) 18%, transparent);
    --border-strong: color-mix(in oklch, var(--accent) 45%, transparent);
    --highlight:     inset 0 1px 0 color-mix(in oklch, var(--accent) 25%, transparent);
    --glow-strength: 1.6;

    --radius-l: 14px;
    --radius-xl: 18px;
    --radius-m: 10px;
  }

  .app[data-theme="neon"] .eyebrow,
  .app[data-theme="neon"] .tile__title { text-shadow: 0 0 18px color-mix(in oklch, var(--accent) 60%, transparent); }

  /* ---- Minimal: calm, flat, almost no motion in the backdrop */
  .app[data-theme="minimal"] {
    --bg:         oklch(14% 0.006 var(--hue-2));
    --bg-raise:   oklch(18% 0.008 var(--hue-2));
    --accent:     oklch(84% 0.08 var(--hue));
    --accent-2:   oklch(74% 0.07 var(--hue-2));
    --accent-3:   oklch(80% 0.06 var(--hue-3));

    --aurora-opacity: 0.22;
    --grain-opacity: 0;
    --particles-display: none;

    --blur: 8px;
    --glass-bg: oklch(100% 0 0 / 0.035);
    --highlight: inset 0 0 0 0 transparent;
    --shadow-2: 0 1px 2px oklch(0% 0 0 / 0.3);
    --shadow-3: 0 6px 20px -8px oklch(0% 0 0 / 0.5);
    --glow-strength: 0.5;
  }

  .app[data-theme="minimal"] .text-aurora {
    background: none;
    color: var(--accent);
    animation: none;
  }

  .app[data-theme="minimal"] .aurora__ribbon { display: none; }

  /* ---- Sunset: golden hour over the old town, amber into rose */
  .app[data-theme="sunset"] {
    --hue: 48;
    --hue-2: 350;
    --hue-3: 18;

    --bg:         oklch(13% 0.025 30);
    --bg-raise:   oklch(17% 0.03 30);
    --accent:     oklch(84% 0.15 68);
    --accent-2:   oklch(70% 0.19 355);
    --accent-3:   oklch(76% 0.16 30);
    --accent-ink: oklch(18% 0.05 40);

    --aurora-1: oklch(64% 0.18 60 / 0.55);
    --aurora-2: oklch(55% 0.21 350 / 0.55);
    --aurora-3: oklch(62% 0.18 25 / 0.45);
    --aurora-4: oklch(42% 0.15 300 / 0.4);
    --border:   oklch(90% 0.04 60 / 0.12);
  }

  /* ---- Abyss: deep ocean, bioluminescent cyan and violet */
  .app[data-theme="abyss"] {
    --hue: 205;
    --hue-2: 265;
    --hue-3: 175;

    --bg:         oklch(10.5% 0.03 245);
    --bg-raise:   oklch(14% 0.04 245);
    --accent:     oklch(82% 0.13 205);
    --accent-2:   oklch(66% 0.17 268);
    --accent-3:   oklch(80% 0.14 170);
    --accent-ink: oklch(15% 0.05 240);

    --aurora-1: oklch(48% 0.14 225 / 0.6);
    --aurora-2: oklch(42% 0.17 265 / 0.55);
    --aurora-3: oklch(60% 0.15 180 / 0.3);
    --aurora-4: oklch(30% 0.1 240 / 0.6);
    --grain-opacity: 0.06;
    --border:   oklch(85% 0.06 210 / 0.12);
  }

  /* ---- Terminal: phosphor green on black, monospace headings, CRT scanlines */
  .app[data-theme="terminal"] {
    --hue: 145;
    --hue-2: 145;
    --hue-3: 110;

    --bg:         oklch(8.5% 0.012 150);
    --bg-raise:   oklch(12% 0.02 150);
    --text:       oklch(92% 0.08 145);
    --text-dim:   oklch(78% 0.09 145);
    --text-faint: oklch(62% 0.08 145);
    --accent:     oklch(86% 0.2 145);
    --accent-2:   oklch(72% 0.17 160);
    --accent-3:   oklch(85% 0.16 110);
    --accent-ink: oklch(12% 0.04 145);

    --aurora-1: oklch(45% 0.14 145 / 0.35);
    --aurora-2: oklch(30% 0.1 160 / 0.4);
    --aurora-3: oklch(40% 0.1 120 / 0.2);
    --aurora-4: oklch(20% 0.05 150 / 0.5);
    --aurora-opacity: 0.6;
    --particles-display: none;

    --font-display: var(--font-mono);
    --radius-l: 6px;
    --radius-xl: 8px;
    --radius-m: 4px;
    --radius-s: 3px;
    --border:        oklch(80% 0.15 145 / 0.2);
    --border-strong: oklch(80% 0.15 145 / 0.4);
    --glass-bg: oklch(15% 0.03 145 / 0.55);
  }
  .app[data-theme="terminal"] .display-xl,
  .app[data-theme="terminal"] .display-l,
  .app[data-theme="terminal"] .display-m,
  .app[data-theme="terminal"] .h2 { letter-spacing: -0.03em; font-weight: 700; }
  .app[data-theme="terminal"] .aurora__vignette {
    background:
      repeating-linear-gradient(180deg, oklch(0% 0 0 / 0.22) 0 1px, transparent 1px 3px),
      radial-gradient(120% 90% at 50% 40%, transparent 50%, oklch(0% 0 0 / 0.75) 100%);
  }
  .app[data-theme="terminal"] .text-aurora { text-shadow: 0 0 24px oklch(86% 0.2 145 / 0.4); }
}