/* ============================================================
   VAPORWAVE DESIGN SYSTEM — core tokens
   Single source of truth. Import this, then use var(--vw-*).
   ============================================================ */
:root {
  /* ---- core palette ---- */
  --vw-magenta:  #FF71CE;
  --vw-cyan:     #01CDFE;
  --vw-indigo:   #B967FF;
  --vw-mint:     #05FFA1;
  --vw-sun:      #FFD319;   /* warm sunset accent */
  --vw-night:    #1A0033;   /* base background */
  --vw-night-2:  #2A0A4A;
  --vw-surface:  #241634;   /* cards / panels */
  --vw-ink:      #FDF0FF;   /* high-contrast text */
  --vw-ink-dim:  #C9A6E0;   /* secondary text */

  /* ---- ionized neons (electrically-excited extensions) ---- */
  --vw-heliotrope: #DF73FF;
  --vw-viridian:   #14FFB1;
  --vw-teal:       #14F1D9;
  --vw-lavender:   #C9A6E0;
  --vw-rose:       #FF5D8F;
  --vw-cobalt:     #3A0CA3;

  /* ---- semantic aliases ---- */
  --vw-bg:      var(--vw-night);
  --vw-fg:      var(--vw-ink);
  --vw-muted:   var(--vw-ink-dim);
  --vw-accent:  var(--vw-magenta);
  --vw-link:    var(--vw-cyan);
  --vw-success: var(--vw-mint);
  --vw-warn:    var(--vw-sun);

  /* ---- gradients ---- */
  --vw-grad-primary: linear-gradient(135deg, var(--vw-magenta), var(--vw-indigo) 50%, var(--vw-cyan));
  --vw-grad-sunset:  linear-gradient(180deg, var(--vw-magenta), var(--vw-sun));
  --vw-grad-night:   linear-gradient(180deg, #1A0033, #3A0CA3);
  --vw-grad-text:    linear-gradient(90deg, var(--vw-cyan), var(--vw-magenta));

  /* ---- phase-shift gradients (colors condensing into one another) ---- */
  --vw-phase-teal-lavender: linear-gradient(120deg, var(--vw-teal), var(--vw-lavender));
  --vw-phase-amber-rose:    linear-gradient(120deg, var(--vw-sun), var(--vw-rose));
  --vw-phase-cobalt-mint:   linear-gradient(120deg, var(--vw-cobalt), var(--vw-mint));
  /* thermal drift = warm↔cool oscillation inside a single stroke (animate background-position) */
  --vw-thermal: linear-gradient(90deg, var(--vw-rose), var(--vw-cyan), var(--vw-sun), var(--vw-heliotrope));

  /* ---- glow / bloom (box-shadow + text-shadow) ---- */
  --vw-glow-magenta: 0 0 8px rgba(255,113,206,.75), 0 0 24px rgba(255,113,206,.45);
  --vw-glow-cyan:    0 0 8px rgba(1,205,254,.75),  0 0 24px rgba(1,205,254,.45);
  --vw-glow-indigo:  0 0 8px rgba(185,103,255,.7), 0 0 24px rgba(185,103,255,.4);
  --vw-glow-soft:    0 0 20px rgba(185,103,255,.35);
  /* subsurface glow = illuminated-from-within (inner light + volumetric outer bloom) */
  --vw-subsurface:   0 0 2px rgba(253,240,255,.9), 0 0 10px rgba(1,205,254,.6), 0 0 30px rgba(255,113,206,.4);

  /* ---- typography ---- */
  --vw-font-script:  'Great Vibes', 'Dancing Script', cursive;        /* Latin calligraphy display */
  --vw-font-brush:   'Ma Shan Zheng', var(--vw-font-script);          /* East-Asian brush (鼎道 / trigrams) */
  --vw-font-display: 'Orbitron', 'Audiowide', sans-serif;             /* retro-futurist headings */
  --vw-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --vw-font-mono:    'JetBrains Mono', 'Cascadia Code', ui-monospace, monospace;

  /* ---- type scale ---- */
  --vw-fs-display: clamp(2.5rem, 6vw, 4.5rem);
  --vw-fs-h1: 2rem;
  --vw-fs-h2: 1.5rem;
  --vw-fs-body: 1rem;
  --vw-fs-small: .85rem;
  --vw-lh: 1.6;

  /* ---- shape / spacing ---- */
  --vw-radius: 14px;
  --vw-border: 1px solid rgba(1,205,254,.35);
  --vw-space: 8px;
}

/* ---- ready-made helper classes ---- */
.vw-glow-text   { text-shadow: var(--vw-glow-magenta); }
.vw-glow-cyan   { text-shadow: var(--vw-glow-cyan); }
.vw-gradient-text {
  background: var(--vw-grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vw-card {
  background: var(--vw-surface);
  border: var(--vw-border);
  border-radius: var(--vw-radius);
  box-shadow: var(--vw-glow-soft);
  padding: calc(var(--vw-space) * 3);
}
.vw-btn {
  font-family: var(--vw-font-display);
  color: var(--vw-ink);
  background: var(--vw-grad-primary);
  border: none; border-radius: var(--vw-radius);
  padding: 10px 22px; letter-spacing: .08em; cursor: pointer;
  box-shadow: var(--vw-glow-magenta);
}
.vw-script { font-family: var(--vw-font-script); }
.vw-brush  { font-family: var(--vw-font-brush); }