/* tokens.css — Amazstock design tokens, derived from Voltstock Redesign v3.
   Spec-aligned names (--vs-bg, --vs-surface, --vs-elevated, --vs-radius-*,
   --vs-space-*) + legacy aliases (--vs-bg-surface) for direct reuse of v3 CSS. */

:root {
  /* ── Colors: surfaces (dark theme default) ── */
  --vs-bg:           #07090C;
  --vs-bg-page:      #0A0D12;
  --vs-surface:      #10141B;
  --vs-elevated:     #161C26;
  --vs-glass:        rgba(22, 28, 38, 0.55);

  /* legacy aliases (compat with v3) */
  --vs-bg-base:      var(--vs-bg);
  --vs-bg-surface:   var(--vs-surface);
  --vs-bg-elevated:  var(--vs-elevated);
  --vs-bg-glass:     var(--vs-glass);

  /* ── Borders ── */
  --vs-border:         rgba(255, 255, 255, 0.09);
  --vs-border-subtle:  rgba(255, 255, 255, 0.06);
  --vs-border-default: rgba(255, 255, 255, 0.09);
  --vs-border-strong:  rgba(255, 255, 255, 0.14);

  /* ── Text ── */
  --vs-text-primary:   #F2F4F7;
  --vs-text-secondary: #A2A9B8;
  --vs-text-tertiary:  #6B7280;
  --vs-text-muted:     #4A5161;

  /* ── Accent (Voltstock green) ── */
  --vs-accent:         #10E089;
  --vs-accent-bright:  #4FFFA8;
  --vs-accent-glow:    rgba(16, 224, 137, 0.22);
  --vs-accent-dim:     rgba(16, 224, 137, 0.08);

  /* ── Semantic ── */
  --vs-electric: #00D4FF;
  --vs-warning:  #FFAB2E;
  --vs-danger:   #FF5757;
  --vs-success:  #22C55E;

  /* ── Amazstock brand ── */
  --brand-orange:      #FF9900;
  --brand-orange-dim:  rgba(255, 153, 0, 0.15);
  --brand-orange-glow: rgba(255, 153, 0, 0.30);

  /* ── Shadows ── */
  --vs-shadow-sm:   0 2px 6px rgba(0, 0, 0, 0.25);
  --vs-shadow-md:   0 8px 24px rgba(0, 0, 0, 0.3);
  --vs-shadow-lg:   0 24px 60px rgba(0, 0, 0, 0.5);
  --vs-shadow-glow: 0 0 30px rgba(16, 224, 137, 0.12);

  /* ── Radii ── */
  --vs-radius-sm:   6px;
  --vs-radius-md:   10px;
  --vs-radius-lg:   14px;
  --vs-radius-xl:   20px;
  --vs-radius-2xl:  28px;
  --vs-radius-full: 9999px;

  /* legacy radii aliases */
  --vs-r-sm:  var(--vs-radius-sm);
  --vs-r-md:  var(--vs-radius-md);
  --vs-r-lg:  var(--vs-radius-lg);
  --vs-r-xl:  var(--vs-radius-xl);
  --vs-r-2xl: var(--vs-radius-2xl);

  /* ── Spacing scale (4px base) ── */
  --vs-space-1:  4px;
  --vs-space-2:  8px;
  --vs-space-3:  12px;
  --vs-space-4:  16px;
  --vs-space-5:  20px;
  --vs-space-6:  24px;
  --vs-space-7:  28px;
  --vs-space-8:  32px;
  --vs-space-9:  40px;
  --vs-space-10: 48px;
  --vs-space-11: 56px;
  --vs-space-12: 64px;

  /* ── Typography ── */
  --vs-font-sans:    'Geist', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --vs-font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  --vs-font-display: 'Instrument Serif', Georgia, serif;

  /* ── Motion ── */
  --vs-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --vs-duration-fast: 0.15s;
  --vs-duration-base: 0.25s;
  --vs-duration-slow: 0.4s;

  /* ── Z-index scale ── */
  --vs-z-dropdown: 100;
  --vs-z-sticky:   200;
  --vs-z-modal:    1000;
  --vs-z-toast:    9999;
}

/* ── Light theme override ── */
[data-theme="light"] {
  --vs-bg:           #F7F8FA;
  --vs-bg-page:      #FFFFFF;
  --vs-surface:      #FFFFFF;
  --vs-elevated:     #F2F4F7;
  --vs-glass:        rgba(255, 255, 255, 0.7);

  --vs-bg-base:      var(--vs-bg);
  --vs-bg-surface:   var(--vs-surface);
  --vs-bg-elevated:  var(--vs-elevated);
  --vs-bg-glass:     var(--vs-glass);

  --vs-border:         rgba(15, 23, 42, 0.10);
  --vs-border-subtle:  rgba(15, 23, 42, 0.06);
  --vs-border-default: rgba(15, 23, 42, 0.10);
  --vs-border-strong:  rgba(15, 23, 42, 0.18);

  --vs-text-primary:   #0F172A;
  --vs-text-secondary: #475569;
  --vs-text-tertiary:  #94A3B8;
  --vs-text-muted:     #CBD5E1;

  --vs-shadow-sm:   0 2px 6px rgba(15, 23, 42, 0.08);
  --vs-shadow-md:   0 8px 24px rgba(15, 23, 42, 0.10);
  --vs-shadow-lg:   0 24px 60px rgba(15, 23, 42, 0.15);
}