/* ============================================================
   Vlow — design tokens
   "NEON FOUNDRY" cold blue-black + neon (Mind ENGINE language).
   The rainbow waveform is kept as the ONE Vlow brand gesture.
   ============================================================ */
:root {
  /* --- cold blue-black surface ramp (Mind ENGINE) --- */
  --bg-0: #070710;
  --bg-1: #0a0a18;
  --bg-2: #0e0f20;
  --bg-3: #14152c;
  --panel:   #0e0f20;
  --panel-2: #14152c;

  /* --- text tiers: cool white → blue-grey --- */
  --fg:       #e9ecff;
  --fg-muted: #9aa0cf;
  --fg-faint: #767bA6;
  --fg-dim:   #565b86;

  /* --- neon trio: spark(blue)=primary / beam(cyan)=secondary / good(mint)=success --- */
  --spark:       #2f6bff;
  --spark-soft:  rgba(47,107,255,0.18);
  --beam:        #3df0ff;
  --beam-soft:   rgba(61,240,255,0.13);
  --good:        #34f5c8;

  /* legacy accent aliases → mapped to neon so older rules still read correctly */
  --accent:        #2f6bff;
  --accent-bright: #3df0ff;
  --accent-deep:   #2456d8;
  --accent-tint:   rgba(47,107,255,0.13);
  --accent-glow:   rgba(47,107,255,0.45);

  /* --- blue-tinted hairlines (Mind ENGINE) --- */
  --line:         rgba(124,140,255,0.15);
  --line-2:       rgba(124,140,255,0.07);
  --glass-border: rgba(124,140,255,0.16);
  --hairline:     rgba(124,140,255,0.09);

  /* --- neon glows --- */
  --glow-m: 0 0 24px rgba(47,107,255,0.6);
  --glow-c: 0 0 22px rgba(61,240,255,0.5);

  /* --- rainbow waveform stops (THE Vlow brand gesture; used ONLY by the waveform + mark) --- */
  --wave-1: #ff5a7a;
  --wave-2: #ff9f43;
  --wave-3: #ffd24d;
  --wave-4: #4fd17a;
  --wave-5: #2ec5d3;
  --wave-6: #4f7cff;
  --wave-7: #b06cff;
  --rainbow: linear-gradient(90deg,
    var(--wave-1), var(--wave-2), var(--wave-3), var(--wave-4),
    var(--wave-5), var(--wave-6), var(--wave-7));
  --neon-grad: linear-gradient(100deg, var(--spark), var(--beam));

  /* semantic */
  --ok:   #34f5c8;
  --warn: #ffb24a;
  --no:   #ff5a7a;

  /* --- panel / glass --- */
  --glass-bg:   rgba(124,140,255,0.045);
  --glass-bg-2: rgba(124,140,255,0.09);
  --glass-blur: 14px;
  --glass-sat:  150%;

  /* --- typography (Mind ENGINE families) --- */
  --font-display: "Chakra Petch", "Noto Sans SC", -apple-system, system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", "Noto Sans SC", -apple-system, system-ui, sans-serif;
  --font-cjk:     "Noto Sans SC", "Hanken Grotesk", -apple-system, "PingFang SC", system-ui, sans-serif;
  --font-sans:    var(--font-cjk);     /* legacy alias */
  --font-serif:   var(--font-display); /* hero em now uses display, not serif */
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-hero:  clamp(2.7rem, 1rem + 8.6vw, 7rem);
  --text-h2:    clamp(1.9rem, 1rem + 3.6vw, 4rem);
  --text-h3:    clamp(1.15rem, 0.9rem + 0.9vw, 1.55rem);
  --text-lead:  clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem);
  --text-body:  clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --text-sm:    0.9rem;
  --text-xs:    0.78rem;
  --text-label: 0.72rem;   /* mono kick labels */

  /* --- spacing --- */
  --space-section: clamp(4.5rem, 3rem + 7vw, 8.5rem);
  --gutter: clamp(1.2rem, 0.5rem + 3vw, 2.5rem);
  --maxw: 1160px;
  --maxw-narrow: 900px;

  /* --- radii: sharper, Mind ENGINE leans angular --- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* --- motion --- */
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 700ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- shadow / lift --- */
  --shadow-lift: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(124,140,255,0.08);
  --shadow-card: 0 18px 50px rgba(0,0,0,0.55);
  --shadow-glow: 0 0 0 1px rgba(47,107,255,0.35), 0 14px 44px rgba(47,107,255,0.28);
}