/* ============================================================
   EVA X — DESIGN TOKENS
   Single source of truth for all design variables
   ============================================================ */

:root {
  /* ── Colors ─────────────────────────────────────────── */
  --bg-primary:   #050505;
  --bg-secondary: #0a0a0c;
  --bg-tertiary:  #121216;
  --bg-quaternary:#1a1a20;
  --bg-hover:     #22222a;

  --border:           rgba(255, 255, 255, 0.08);
  --border-light:     rgba(255, 255, 255, 0.04);
  --border-strong:    rgba(255, 255, 255, 0.12);        /* elevated-surface border */
  --border-separator: rgba(255, 255, 255, 0.06); /* row divider — 8% white for readable contrast */

  --text-primary:   #f0f0ff;
  --text-secondary: #a1a1bc;
  --text-muted:     #6b6b8a;
  --text-disabled:  #3a3a58;

  /* ── Brand ──────────────────────────────────────────── */
  --accent:         #7c3aed;
  --accent-hover:   #9333ea;            /* slightly darker hover state */
  --accent-light:   #a855f7;            /* lighter active state */
  --accent-2:       #c026d3;            /* pink/magenta secondary brand */
  --accent-2-light: #d946ef;            /* lighter pink variant */
  --accent-glow:    0 0 24px rgba(124, 58, 237, 0.3);
  --accent-2-glow:  rgba(192, 38, 211, 0.25);
  --accent-grad:    linear-gradient(135deg, #7c3aed, #c026d3);

  /* ── Extended palette ───────────────────────────────── */
  --blue:     #3b82f6;
  --blue-dim: rgba(59, 130, 246, 0.12);

  /* ── Semantic ───────────────────────────────────────── */
  --success:      #22c55e;
  --warning:      #f59e0b;
  --danger:       #ef4444;
  --info:         #06b6d4;

  /* ── Legacy (backward compat with existing inline CSS) */
  --bg:  var(--bg-primary);
  --s:   var(--bg-secondary);
  --c:   var(--bg-tertiary);
  --b:   var(--border);
  --b2:  var(--border-strong);
  --fg:  var(--bg-tertiary);
  --t:   var(--text-primary);
  --pk:  var(--accent-2);
  --pu:  var(--accent);
  --tx:  var(--text-primary);
  --mu:  var(--text-muted);
  --mu2: var(--bg-hover);

  /* ── Short aliases used by components & layout ──────── */
  --bg-2:       var(--bg-secondary);
  --bg-3:       var(--bg-tertiary);
  --bg-4:       var(--bg-quaternary);
  --tx-2:       var(--text-secondary);
  --tx-3:       var(--text-muted);
  --tx-4:       var(--text-disabled);
  --border-soft: var(--border-light);

  /* ── Spacing Scale ──────────────────────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ── Border Radius ──────────────────────────────────── */
  --r-xs:   8px;
  --r-sm:  12px;
  --r-md:  16px;
  --r:     20px;
  --r-lg:  24px;
  --r-xl:  28px;
  --r-2xl: 32px;
  --r-full: 9999px;

  /* ── Shadows ────────────────────────────────────────── */
  --shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow:        0 4px 24px rgba(0, 0, 0, 0.45);
  --shadow-md:     0 6px 32px rgba(0, 0, 0, 0.5);
  --shadow-lg:     0 8px 40px rgba(0, 0, 0, 0.6);
  --shadow-xl:     0 16px 64px rgba(0, 0, 0, 0.7);
  --shadow-accent: 0 4px 20px rgba(124, 58, 237, 0.25);

  /* ── Transitions ────────────────────────────────────── */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:  cubic-bezier(0.0, 0, 0.2, 1);
  --t:         0.2s;
  --t-slow:    0.35s;

  /* ── Typography ─────────────────────────────────────── */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ── Layout ─────────────────────────────────────────── */
  --nav-h:  60px;
  --hdr-h:  52px;

  /* ── Z-index ────────────────────────────────────────── */
  --z-nav:     50;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   9999;

  /* ── Semantic dim backgrounds ───────────────────────── */
  --accent-dim:       rgba(124, 58, 237, 0.12);
  --accent-grad-soft: rgba(124, 58, 237, 0.06);
  --success-dim:      rgba(34, 197, 94, 0.12);
  --warn:             var(--warning);
  --warn-dim:         rgba(245, 158, 11, 0.12);
  --danger-dim:       rgba(239, 68, 68, 0.12);

  /* ── Extra aliases for index.html compatibility ─────────── */
  --bg2:      var(--bg-secondary);
  --surface:  var(--bg-tertiary);
  --surface2: var(--bg-quaternary);
  --surface3: var(--bg-hover);
  --border2:  var(--border-strong);     /* alias → canonical */
  --accent2:  var(--accent-hover);      /* alias → canonical */
  --accent3:  var(--accent-light);      /* alias → canonical */
  --pk2:      var(--accent-2-light);    /* alias → canonical */
  --pk-glow:  var(--accent-2-glow);     /* alias → canonical */
  --tx2:      var(--text-secondary); /* Legacy alias for backward compat — prefer --text-secondary */
  --tx3:      var(--text-muted);     /* Legacy alias for backward compat — prefer --text-muted */
  --tx4:      var(--text-disabled);  /* Legacy alias for backward compat — prefer --text-disabled */
  --green:    var(--success);
  --red:      var(--danger);
  --amber:    var(--warning);
  --grad:     var(--accent-grad);

  /* ── Spring animation (used by index.html) ──────────────── */
  --spring:   0.38s cubic-bezier(0.22,1,0.36,1);

  /* ── Typography Scale ───────────────────────────────────── */
  --text-xs:   0.6875rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
}