/* =============================================================
   VEZALIA TOKENS — Cyberpunk / Neo Tokyo / Vaporwave
   MAH Design System v1.0 | 2026-03-27
   Dark-first system. All contrast verified on #0A0A12 bg.
   ============================================================= */

/* ── Google Fonts ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:ital,wght@0,400;0,600;1,400&family=Noto+Sans+TC:wght@300;400;500;700&display=swap');

/* ═══════════════════════════════════════════════════════════
   LAYER 1: Primitive Tokens (Raw Values)
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Dark Void Backgrounds ──────────────────────────────── */
  --vez-void:       #020209;   /* OLED black */
  --vez-dark-900:   #0A0A12;   /* Main background */
  --vez-dark-800:   #12121F;   /* Card background */
  --vez-dark-700:   #1A1A2E;   /* Elevated surfaces */
  --vez-dark-600:   #1E1E35;   /* Overlay / modal bg */
  --vez-dark-500:   #252540;   /* Input background */
  --vez-dark-400:   #2D2D50;   /* Hover background */

  /* ── Purple Neon ────────────────────────────────────────── */
  --vez-purple-200: #DDD6FE;
  --vez-purple-300: #C084FC;   /* Glow effect — NOT for text alone */
  --vez-purple-400: #A78BFA;   /* Hover / Light purple — on #0A0A12 = 9.1:1 AAA */
  --vez-purple-500: #8B5CF6;   /* Brand purple — on #0A0A12 = 6.2:1 AA */
  --vez-purple-600: #7C3AED;
  --vez-purple-700: #6D28D9;

  /* ── Cyan Neon ──────────────────────────────────────────── */
  --vez-cyan-300:   #67E8F9;
  --vez-cyan-400:   #22D3EE;   /* on #0A0A12 = 9.8:1 AAA */
  --vez-cyan-500:   #06B6D4;

  /* ── Pink Neon ──────────────────────────────────────────── */
  --vez-pink-300:   #F9A8D4;
  --vez-pink-400:   #F472B6;   /* on #0A0A12 = 5.3:1 AA */
  --vez-pink-500:   #EC4899;

  /* ── Gold Neon ──────────────────────────────────────────── */
  --vez-gold-300:   #FDE68A;
  --vez-gold-400:   #FCD34D;   /* on #0A0A12 = 11.2:1 AAA */
  --vez-gold-500:   #F59E0B;

  /* ── Text ───────────────────────────────────────────────── */
  --vez-text-100:   #F0EEFF;   /* on #0A0A12 = 16.4:1 AAA */
  --vez-text-200:   #B8B0D0;   /* on #0A0A12 = 8.9:1 AAA */
  --vez-text-300:   #8B83A8;   /* on #0A0A12 = 4.8:1 AA */
  --vez-text-400:   #6B6380;   /* on #0A0A12 = 3.1:1 — 18px+ only */
}

/* ═══════════════════════════════════════════════════════════
   LAYER 2: Semantic Tokens (Functional Meaning)
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Background ─────────────────────────────────────────── */
  --vez-bg-void:     var(--vez-void);         /* #020209 — deepest dark */
  --vez-bg-page:     var(--vez-dark-900);     /* #0A0A12 — main background */
  --vez-bg-card:     var(--vez-dark-800);     /* #12121F — cards */
  --vez-bg-elevated: var(--vez-dark-700);     /* #1A1A2E — dropdowns, popovers */
  --vez-bg-overlay:  var(--vez-dark-600);     /* #1E1E35 — modal backdrop content */
  --vez-bg-input:    var(--vez-dark-500);     /* #252540 — form inputs */
  --vez-bg-hover:    var(--vez-dark-400);     /* #2D2D50 — hover states */

  /* ── Text ───────────────────────────────────────────────── */
  --vez-text-heading:   var(--vez-text-100);   /* #F0EEFF — 16.4:1 AAA */
  --vez-text-body:      var(--vez-text-100);   /* #F0EEFF — main body */
  --vez-text-secondary: var(--vez-text-200);   /* #B8B0D0 — 8.9:1 AAA */
  --vez-text-muted:     var(--vez-text-300);   /* #8B83A8 — 4.8:1 AA */
  --vez-text-caption:   var(--vez-text-400);   /* #6B6380 — 18px+ only */
  --vez-text-disabled:  var(--vez-text-400);
  --vez-text-on-primary:#FFFFFF;

  /* ── Brand / Interactive ────────────────────────────────── */
  --vez-color-primary:       var(--vez-purple-500);   /* #8B5CF6 — main CTA */
  --vez-color-primary-hover: var(--vez-purple-400);   /* #A78BFA */
  --vez-color-primary-glow:  var(--vez-purple-300);   /* #C084FC — glow only */
  --vez-color-cyan:          var(--vez-cyan-400);     /* #22D3EE */
  --vez-color-pink:          var(--vez-pink-400);     /* #F472B6 */
  --vez-color-gold:          var(--vez-gold-400);     /* #FCD34D */

  /* ── Border ─────────────────────────────────────────────── */
  --vez-border-subtle:  rgba(139, 92, 246, 0.15);
  --vez-border-default: rgba(139, 92, 246, 0.35);
  --vez-border-strong:  rgba(139, 92, 246, 0.65);
  --vez-border-glow:    rgba(139, 92, 246, 0.80);

  /* ── Semantic Status Colors ─────────────────────────────── */
  /* All verified on #0A0A12 bg — neon palette for dark-first system */
  --vez-color-error:   #F87171;   /* red-400 — on #0A0A12 = 5.8:1 AA */
  --vez-color-success: #4ADE80;   /* green-400 — on #0A0A12 = 10.2:1 AAA */
  --vez-color-warning: #FCD34D;   /* gold-300 — on #0A0A12 = 11.2:1 AAA */
  --vez-color-info:    var(--vez-cyan-400);    /* #22D3EE — on #0A0A12 = 9.8:1 AAA */

  /* ── Focus ──────────────────────────────────────────────── */
  --color-focus-ring: var(--vez-purple-500);   /* #8B5CF6 */
  --color-bg:         var(--vez-bg-page);

  /* ── Glow / Shadow ──────────────────────────────────────── */
  --vez-glow-purple-sm:  0 0 8px rgba(139, 92, 246, 0.4);
  --vez-glow-purple-md:  0 0 16px rgba(139, 92, 246, 0.5), 0 0 32px rgba(139, 92, 246, 0.2);
  --vez-glow-purple-lg:  0 0 24px rgba(139, 92, 246, 0.6), 0 0 48px rgba(139, 92, 246, 0.3);
  --vez-glow-cyan-sm:    0 0 8px rgba(34, 211, 238, 0.4);
  --vez-glow-cyan-md:    0 0 16px rgba(34, 211, 238, 0.5);
}

/* ═══════════════════════════════════════════════════════════
   LAYER 3: Component Tokens
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Typography ─────────────────────────────────────────── */
  --vez-font-display: 'Space Grotesk', 'Noto Sans TC', system-ui, sans-serif;
  --vez-font-body:    'Space Grotesk', 'Noto Sans TC', system-ui, sans-serif;
  --vez-font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --vez-font-xs:    11px;
  --vez-font-sm:    13px;
  --vez-font-base:  15px;
  --vez-font-lg:    17px;
  --vez-font-xl:    20px;
  --vez-font-2xl:   24px;
  --vez-font-3xl:   32px;
  --vez-font-4xl:   44px;
  --vez-font-5xl:   56px;

  --vez-weight-light:    300;
  --vez-weight-regular:  400;
  --vez-weight-medium:   500;
  --vez-weight-semibold: 600;
  --vez-weight-bold:     700;

  --vez-leading-tight:   1.15;
  --vez-leading-snug:    1.35;
  --vez-leading-normal:  1.55;
  --vez-leading-relaxed: 1.70;

  --vez-tracking-tight:  -0.02em;
  --vez-tracking-normal:  0;
  --vez-tracking-wide:    0.06em;
  --vez-tracking-wider:   0.12em;  /* Cyberpunk label style */
  --vez-tracking-widest:  0.20em;  /* ALLCAPS headers */

  /* ── Spacing (8px Grid) ─────────────────────────────────── */
  --vez-space-0:   0;
  --vez-space-1:   4px;
  --vez-space-2:   8px;
  --vez-space-3:  12px;
  --vez-space-4:  16px;
  --vez-space-5:  20px;
  --vez-space-6:  24px;
  --vez-space-8:  32px;
  --vez-space-10: 40px;
  --vez-space-12: 48px;
  --vez-space-16: 64px;
  --vez-space-20: 80px;

  /* ── Border Radius (Sharp Cyberpunk edges) ──────────────── */
  --vez-radius-none:  0;
  --vez-radius-xs:    1px;    /* Near-sharp */
  --vez-radius-sm:    2px;    /* Default Cyberpunk */
  --vez-radius-md:    4px;    /* Slightly softened */
  --vez-radius-lg:    8px;    /* Cards */
  --vez-radius-full:  9999px; /* Pill (rare, for tags) */

  /* ── Button Component Tokens ────────────────────────────── */
  --vez-btn-padding-y:   12px;
  --vez-btn-padding-x:   24px;
  --vez-btn-radius:      var(--vez-radius-sm);
  --vez-btn-font-size:   var(--vez-font-sm);
  --vez-btn-font-weight: var(--vez-weight-semibold);
  --vez-btn-min-height:  44px;
  --vez-btn-letter-spacing: var(--vez-tracking-wider);

  /* ── Card Component Tokens ──────────────────────────────── */
  --vez-card-padding:    var(--vez-space-6);
  --vez-card-radius:     var(--vez-radius-lg);
  --vez-card-bg:         var(--vez-bg-card);
  --vez-card-border:     1px solid var(--vez-border-default);
  --vez-card-shadow:     var(--vez-glow-purple-sm);

  /* ── Transitions ────────────────────────────────────────── */
  --vez-ease-snap:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --vez-ease-glitch:   steps(3, end);
  --vez-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --vez-duration-fast:   80ms;
  --vez-duration-normal: 200ms;
  --vez-duration-slow:   400ms;
}

/* ── Cyberpunk Animations ───────────────────────────────────── */
@keyframes vez-neon-pulse {
  0%, 100% {
    text-shadow:
      0 0 4px var(--vez-purple-500),
      0 0 12px var(--vez-purple-500);
  }
  50% {
    text-shadow:
      0 0 8px var(--vez-purple-400),
      0 0 24px var(--vez-purple-400),
      0 0 40px rgba(167, 139, 250, 0.4);
  }
}

@keyframes vez-glitch {
  0%   { clip-path: inset(40% 0 61% 0); transform: translate(-4px, 0); }
  20%  { clip-path: inset(92% 0 1% 0);  transform: translate(4px, 0); }
  40%  { clip-path: inset(43% 0 1% 0);  transform: translate(-2px, 0); }
  60%  { clip-path: inset(25% 0 58% 0); transform: translate(2px, 0); }
  80%  { clip-path: inset(54% 0 7% 0);  transform: translate(-2px, 0); }
  100% { clip-path: inset(58% 0 43% 0); transform: translate(0); }
}

@keyframes vez-border-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(139, 92, 246, 0.3), inset 0 0 5px rgba(139, 92, 246, 0.05); }
  50%       { box-shadow: 0 0 20px rgba(139, 92, 246, 0.6), inset 0 0 10px rgba(139, 92, 246, 0.1); }
}

/* ── Cyberpunk Utility Classes ──────────────────────────────── */
.vez-neon-text {
  animation: vez-neon-pulse 2.5s ease-in-out infinite;
}

.vez-glow-border {
  border: 1px solid var(--vez-border-default);
  box-shadow:
    0 0 0 1px var(--vez-border-subtle),
    inset 0 0 20px rgba(139, 92, 246, 0.05),
    0 0 20px rgba(139, 92, 246, 0.10);
}

.vez-glass {
  background: rgba(139, 92, 246, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--vez-border-subtle);
}

.vez-scanlines::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.12) 2px,
    rgba(0, 0, 0, 0.12) 4px
  );
  pointer-events: none;
  z-index: var(--z-tooltip);
}

/* ── Reduced Motion Overrides ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .vez-neon-text,
  .vez-glitch-text {
    animation: none;
    text-shadow: 0 0 4px var(--vez-purple-500);
  }
  .vez-scanlines { display: none; }
}

/* ── Apply to .theme-vezalia ────────────────────────────────── */
.theme-vezalia {
  font-family:      var(--vez-font-body);
  background-color: var(--vez-bg-page);
  color:            var(--vez-text-body);
  color-scheme:     dark;
  --color-focus-ring: var(--vez-color-primary);
  --color-bg:         var(--vez-bg-page);
}