/*
 * Design tokens — Aurora Nights (signed off).
 *
 * Colour channels are stored as space-separated RGB triplets so Tailwind can
 * compose them with its opacity modifiers via rgb(var(--x) / <alpha-value>).
 */

:root,
[data-theme='aurora'] {
  --surface-0: 10 8 24;
  --surface-1: 22 17 48;
  --surface-footer: 7 5 15;

  --text-1: 255 255 255;
  --text-2: 232 226 250;
  --text-3: 167 158 200;

  --brand-300: 216 180 254;
  --brand-400: 192 132 252;
  --brand-500: 168 85 247;
  --brand-600: 147 51 234;
  --brand-700: 126 34 206;

  --accent-300: 249 168 212;
  --accent-400: 244 114 182;
  --accent-500: 236 72 153;

  --grad-from: 99 102 241;
  --grad-via: 168 85 247;
  --grad-to: 236 72 153;

  --glass-bg: 168 85 247 / 0.08;
  --glass-border: 192 132 252 / 0.18;
  --glass-hover-bg: 168 85 247 / 0.14;

  --glow-a: 0.35;
  --glow-b: 0.28;

  --media-frame: 14 10 32;
}

/* ── Direction B — Neon Mint ─────────────────────────────────────────────
   Cyan → teal → lime on a deep teal-black. Reads as speed and uptime;
   the developer-tool register (Vercel, Supabase, Railway). */
[data-theme='mint'] {
  --surface-0: 5 19 26;
  --surface-1: 11 34 44;
  --surface-footer: 3 13 18;

  --text-1: 255 255 255;
  --text-2: 219 240 238;
  --text-3: 141 175 178;

  --brand-300: 94 234 212;
  --brand-400: 45 212 191;
  --brand-500: 20 184 166;
  --brand-600: 13 148 136;
  --brand-700: 15 118 110;

  --accent-300: 217 249 157;
  --accent-400: 163 230 53;
  --accent-500: 132 204 22;

  --grad-from: 6 182 212;
  --grad-via: 20 184 166;
  --grad-to: 163 230 53;

  --glass-bg: 45 212 191 / 0.07;
  --glass-border: 94 234 212 / 0.18;
  --glass-hover-bg: 45 212 191 / 0.13;

  --glow-a: 0.3;
  --glow-b: 0.3;

  --media-frame: 5 24 30;
}

/* ── Direction C — Solar Flare ───────────────────────────────────────────
   Amber → rose → fuchsia on plum-black. The furthest departure from the
   current scheme; warm hues advance visually, so it reads loudest. */
[data-theme='solar'] {
  --surface-0: 20 10 20;
  --surface-1: 38 18 34;
  --surface-footer: 13 6 13;

  --text-1: 255 255 255;
  --text-2: 250 230 233;
  --text-3: 191 155 165;

  --brand-300: 253 186 116;
  --brand-400: 251 146 60;
  --brand-500: 249 115 22;
  --brand-600: 234 88 12;
  --brand-700: 194 65 12;

  --accent-300: 253 164 175;
  --accent-400: 251 113 133;
  --accent-500: 244 63 94;

  --grad-from: 245 158 11;
  --grad-via: 244 63 94;
  --grad-to: 217 70 239;

  --glass-bg: 251 146 60 / 0.07;
  --glass-border: 253 186 116 / 0.18;
  --glass-hover-bg: 251 146 60 / 0.13;

  --glow-a: 0.3;
  --glow-b: 0.26;

  --media-frame: 26 12 24;
}

/* ── Direction D — Royal Gold ────────────────────────────────────────────
   Electric blue with a gold accent on royal navy. Trust plus luxury;
   gold is genuinely uncommon in the hosting category. */
[data-theme='royal'] {
  --surface-0: 6 11 31;
  --surface-1: 14 25 56;
  --surface-footer: 4 8 22;

  --text-1: 255 255 255;
  --text-2: 224 232 250;
  --text-3: 148 167 202;

  --brand-300: 147 197 253;
  --brand-400: 96 165 250;
  --brand-500: 59 130 246;
  --brand-600: 37 99 235;
  --brand-700: 29 78 216;

  --accent-300: 253 230 138;
  --accent-400: 251 191 36;
  --accent-500: 245 158 11;

  --grad-from: 14 165 233;
  --grad-via: 59 130 246;
  --grad-to: 99 102 241;

  --glass-bg: 96 165 250 / 0.08;
  --glass-border: 147 197 253 / 0.18;
  --glass-hover-bg: 96 165 250 / 0.14;

  --glow-a: 0.32;
  --glow-b: 0.26;

  --media-frame: 6 14 38;
}

/* ── Direction E — Daylight ──────────────────────────────────────────────
   Light canvas, saturated indigo and coral. Solves dullness structurally
   rather than by hue: the tonal range alone is far wider than any dark
   variant can achieve. */
[data-theme='daylight'] {
  --surface-0: 255 255 255;
  --surface-1: 243 245 255;
  --surface-footer: 11 16 32;

  --text-1: 12 17 40;
  --text-2: 51 65 90;
  --text-3: 100 116 139;

  --brand-300: 165 180 252;
  --brand-400: 129 140 248;
  --brand-500: 99 102 241;
  --brand-600: 79 70 229;
  --brand-700: 67 56 202;

  --accent-300: 253 164 175;
  --accent-400: 251 113 133;
  --accent-500: 244 63 94;

  --grad-from: 79 70 229;
  --grad-via: 124 58 237;
  --grad-to: 244 63 94;

  --glass-bg: 255 255 255 / 1;
  --glass-border: 15 23 42 / 0.08;
  --glass-hover-bg: 255 255 255 / 1;

  --glow-a: 0.16;
  --glow-b: 0.14;

  --media-frame: 226 232 240;
}

/* ── Ambient hero glows ──────────────────────────────────────────────────
   Previously hardcoded at 8–10% opacity, which made them invisible. Now
   theme-driven so each palette can carry real atmospheric colour. */
.hero-glow-a,
.hero-glow-b {
  position: absolute;
  border-radius: 9999px;
  filter: blur(96px);
}

.hero-glow-a {
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 500px;
  background: rgb(var(--grad-via) / var(--glow-a));
}

.hero-glow-b {
  top: 33%;
  left: 25%;
  width: 460px;
  height: 340px;
  background: rgb(var(--grad-to) / var(--glow-b));
}

/* ── Daylight-only inversions ────────────────────────────────────────────
   The markup assumes a dark canvas (text-white, white/5 fills). These
   rules retarget those assumptions without touching the templates, while
   preserving white text wherever it sits on a gradient. */
[data-theme='daylight'] body {
  color: rgb(var(--text-2));
}

[data-theme='daylight'] .text-white:not(.gradient-bg .text-white),
[data-theme='daylight'] h1,
[data-theme='daylight'] h2,
[data-theme='daylight'] h3 {
  color: rgb(var(--text-1));
}

[data-theme='daylight'] .text-slate-300,
[data-theme='daylight'] .text-slate-400 {
  color: rgb(var(--text-2));
}

[data-theme='daylight'] .text-slate-500 {
  color: rgb(var(--text-3));
}

[data-theme='daylight'] .glass {
  box-shadow: 0 4px 6px -1px rgb(15 23 42 / 0.06), 0 12px 28px -8px rgb(79 70 229 / 0.14);
}

[data-theme='daylight'] .bg-white\/8,
[data-theme='daylight'] .bg-white\/10 {
  background-color: rgb(var(--brand-500) / 0.08);
}

[data-theme='daylight'] .border-white\/10,
[data-theme='daylight'] .border-white\/20 {
  border-color: rgb(var(--brand-500) / 0.22);
}

[data-theme='daylight'] .border-white\/5 {
  border-color: rgb(15 23 42 / 0.08);
}

/* The CTA banner and footer stay dark, so their contents keep light type. */
[data-theme='daylight'] .gradient-bg,
[data-theme='daylight'] .gradient-bg h2,
[data-theme='daylight'] .gradient-bg .text-white,
[data-theme='daylight'] footer,
[data-theme='daylight'] footer .text-white {
  color: #fff;
}

[data-theme='daylight'] .gradient-bg .bg-white\/10 {
  background-color: rgb(255 255 255 / 0.16);
}

[data-theme='daylight'] .gradient-bg .border-white\/20 {
  border-color: rgb(255 255 255 / 0.35);
}