/* === Design Tokens (CSS Variables) === */

:root {
  /* Colors - Primary */
  --color-primary: #D4FF00;
  --color-primary-hover: #c2eb00;
  --color-primary-rgb: 212, 255, 0;

  /* Colors - Accent */
  --color-accent: #a855f7;
  --color-accent-dark: #6366f1;

  /* Colors - Background */
  --color-bg: #121212;
  --color-surface: rgba(255, 255, 255, 0.05);
  --color-surface-hover: rgba(255, 255, 255, 0.06);
  --color-surface-active: rgba(255, 255, 255, 0.1);

  /* Colors - Border */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(255, 255, 255, 0.14);
  --color-border-strong: rgba(255, 255, 255, 0.1);

  /* Colors - Text */
  --color-text: #ffffff;
  --color-text-muted: #A0A0A0;
  --color-text-dim: #666;
  --color-text-dimmer: #555;
  --color-text-dimmest: #444;

  /* Colors - Semantic */
  --color-success: #34C759;
  --color-danger: #FF453A;
  --color-gold: #FFD700;
  --color-silver: #C0C0C0;
  --color-bronze: #CD7F32;

  /* Spacing */
  --gap-sm: 4px;
  --gap-md: 10px;
  --gap-lg: 14px;
  --gap-xl: 16px;
  --gap-2xl: 20px;
  --gap-3xl: 24px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 22px;
  --radius-full: 999px;

  /* Font sizes */
  --text-xs: 10px;
  --text-sm: 11px;
  --text-base: 12px;
  --text-md: 13px;
  --text-lg: 14px;
  --text-xl: 15px;
  --text-2xl: 16px;
  --text-3xl: 20px;
  --text-4xl: 26px;
  --text-5xl: 28px;

  /* Backdrop */
  --blur-sm: blur(16px);
  --blur-md: blur(20px);
  --blur-lg: blur(24px);

  /* Shadows */
  --shadow-nav: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.5);
  --shadow-primary: 0 8px 24px rgba(212, 255, 0, 0.2);
  --shadow-primary-glow: 0 4px 16px rgba(212, 255, 0, 0.3);
  --shadow-danger: 0 8px 24px rgba(255, 69, 58, 0.2);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}