/* =============================================================================
   CSS Custom Properties (Design Tokens)
   ============================================================================= */

:root {
  /* Brand colors (from Arduboy/Web Flasher) */
  --color-primary: #8B2DB4;        /* Arduboy purple */
  --color-primary-dark: #6B1D94;
  --color-primary-light: #A84DD4;
  --color-accent: #FBF157;         /* Arduboy yellow */
  --color-accent-dark: #D4CC3A;

  /* Semantic colors */
  --color-success: #34D399;
  --color-warning: #FBBF24;
  --color-danger: #F87171;
  --color-info: #60A5FA;

  /* Neutrals — deeper, richer dark palette */
  --color-bg: #0a0a14;
  --color-bg-surface: rgba(15, 15, 30, 0.6);
  --color-bg-elevated: rgba(25, 25, 50, 0.5);
  --color-bg-card: rgba(30, 30, 60, 0.4);
  --color-text: #e8eaf0;
  --color-text-secondary: rgb(178, 184, 214);
  --color-text-muted: rgb(139, 143, 167);
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-subtle: rgba(255, 255, 255, 0.04);

  /* Glass / glow tokens */
  --glass-bg: rgba(10, 10, 20, 0.6);
  --glass-blur: 20px;
  --glass-border: 1px solid rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --glow-primary: 0 0 20px rgba(139, 45, 180, 0.3);
  --glow-accent: 0 0 20px rgba(251, 241, 87, 0.15);
  --glow-success: 0 0 15px rgba(52, 211, 153, 0.2);

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 0.9375rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* Borders */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}