/* LaminarFlow v2 — design tokens.
   Components consume tokens only; a theme is one block of overrides.
   Themes: aurora (the :root base), blackout, spectrum — selected via
   data-theme on <html>; the shipped default is spectrum, set in the markup.

   Gradient token contract:
   --grad-angle   axis of every moving gradient (0deg = 12 o'clock,
                  clockwise; must keep a horizontal component — the
                  slide distance divides by sin(angle) in main.css).
   --grad-cycle   one full color cycle as positioned stops spanning
                  --grad-period, first color repeated at the end, so the
                  repeating gradient loops seamlessly.
   --panel-cycle  same contract spanning --panel-period, for the wider
                  closing CTA panel.
   --wave-1..7    seven stop colors for the SVG streamline gradient; the
                  last must equal the first for a seamless SMIL loop. */

:root {
  /* ground */
  --bg: #0b0416;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-border: rgba(255, 255, 255, 0.09);
  --hairline: rgba(255, 255, 255, 0.12);
  --hairline-strong: rgba(255, 255, 255, 0.18);

  /* height of the streamline band: waves viewBox 150 / 1440 of the width */
  --wave-band: 10.42vw;

  /* type */
  --text: #f6f1ff;
  --text-muted: #cbb8e8;
  --text-subtle: #9d87c2;

  /* accent ramp */
  --g1: #a78bfa;
  --g2: #ec4899;
  --g3: #22d3ee;
  --grad-angle: 80deg;
  --grad-period: 600px;
  --grad-cycle: var(--g1) 0, var(--g2) 200px, var(--g3) 400px, var(--g1) 600px;
  --grad-fg: #ffffff;
  --focus-ring: var(--g3);
  /* dark outline behind white type on any animated-gradient surface */
  --text-outline: rgba(10, 6, 20, 0.85);
  --glow: rgba(236, 72, 153, 0.35);

  /* per-element accents (feature icons, chip spark) */
  --accent-1: #ec4899;
  --accent-2: #a78bfa;
  --accent-3: #22d3ee;

  /* closing CTA panel — translucent ramp over the page ground */
  --panel-period: 900px;
  --panel-cycle: rgba(124, 58, 237, 0.85) 0, rgba(236, 72, 153, 0.75) 300px, rgba(34, 211, 238, 0.55) 600px, rgba(124, 58, 237, 0.85) 900px;

  /* ambient blobs */
  --blob-a: rgba(124, 58, 237, 0.55);
  --blob-a2: rgba(236, 72, 153, 0.25);
  --blob-b: rgba(34, 211, 238, 0.35);

  /* SVG streamline gradient stops (last = first) */
  --wave-1: var(--g1);
  --wave-2: var(--g2);
  --wave-3: var(--g3);
  --wave-4: var(--g1);
  --wave-5: var(--g2);
  --wave-6: var(--g3);
  --wave-7: var(--g1);
}

[data-theme="blackout"] {
  --bg: #000000;
  --text-muted: #b3aec2;
  --text-subtle: #8f8a9c;
  --blob-a: rgba(124, 58, 237, 0.3);
  --blob-a2: rgba(236, 72, 153, 0.14);
  --blob-b: rgba(34, 211, 238, 0.18);
}

[data-theme="spectrum"] {
  --bg: #0a0614;
  --text: #f7f4ff;
  --text-muted: #c9bfe0;
  --text-subtle: #a292c4;

  /* six-color rainbow, lightness-balanced for a dark ground */
  --s-red: #ff6b6b;
  --s-orange: #ffa94d;
  --s-yellow: #ffd43b;
  --s-green: #51cf66;
  --s-blue: #4dabf7;
  --s-violet: #b197fc;

  /* re-point the base ramp so any consumer themes correctly */
  --g1: var(--s-violet);
  --g2: var(--s-red);
  --g3: var(--s-blue);
  --focus-ring: var(--s-blue);

  --grad-cycle: var(--s-red) 0, var(--s-orange) 100px, var(--s-yellow) 200px, var(--s-green) 300px, var(--s-blue) 400px, var(--s-violet) 500px, var(--s-red) 600px;
  --glow: rgba(255, 169, 77, 0.35);

  --accent-1: var(--s-red);
  --accent-2: var(--s-green);
  --accent-3: var(--s-blue);

  --panel-cycle: rgba(255, 107, 107, 0.8) 0, rgba(255, 169, 77, 0.68) 150px, rgba(255, 212, 59, 0.45) 300px, rgba(81, 207, 102, 0.6) 450px, rgba(77, 171, 247, 0.7) 600px, rgba(177, 151, 252, 0.75) 750px, rgba(255, 107, 107, 0.8) 900px;

  --blob-a: rgba(255, 107, 107, 0.4);
  --blob-a2: rgba(255, 169, 77, 0.18);
  --blob-b: rgba(77, 171, 247, 0.3);

  --wave-1: var(--s-red);
  --wave-2: var(--s-orange);
  --wave-3: var(--s-yellow);
  --wave-4: var(--s-green);
  --wave-5: var(--s-blue);
  --wave-6: var(--s-violet);
  --wave-7: var(--s-red);
}