/**
 * BlackRat Design System — Tokens
 * BLACK GLASS + ELECTRIC RED + CYBER GRID
 */

:root {
  /* Color */
  --br-bg-primary: #050505;
  --br-bg-secondary: #0D0D0D;
  --br-surface: #121212;
  --br-black: #000000;
  --br-text: #FFFFFF;
  --br-text-secondary: #A1A1AA;
  --br-border: #27272A;
  --br-red: #FF1744;
  --br-crimson: #D50032;
  --br-success: #22C55E;
  --br-warning: #F59E0B;
  --br-critical: #FF1744;
  --br-link: #FF3658;
  --br-interactive: #FF3658;

  /* Glass levels */
  --br-glass-1-bg: rgba(255, 255, 255, 0.025);
  --br-glass-1-border: rgba(255, 255, 255, 0.06);
  --br-glass-2-bg: rgba(255, 255, 255, 0.045);
  --br-glass-2-border: rgba(255, 255, 255, 0.09);
  --br-glass-3-bg: rgba(255, 255, 255, 0.065);
  --br-glass-3-border: rgba(255, 23, 68, 0.20);

  /* Effects */
  --br-blur: 20px;
  --br-blur-strong: 30px;
  --br-radius-sm: 10px;
  --br-radius-md: 16px;
  --br-radius-lg: 24px;
  --br-radius-hero: 32px;

  /* Shadows */
  --br-shadow: 0 10px 40px rgba(0, 0, 0, 0.30);
  --br-shadow-lg: 0 30px 100px rgba(0, 0, 0, 0.50);
  --br-shadow-glass: 0 20px 80px rgba(0, 0, 0, 0.45);
  --br-shadow-red: 0 0 50px rgba(255, 23, 68, 0.12);
  --br-shadow-red-btn: 0 0 30px rgba(255, 23, 68, 0.20);

  /* Spacing */
  --br-space-xs: 0.5rem;
  --br-space-sm: 1rem;
  --br-space-md: 1.5rem;
  --br-space-lg: 2.5rem;
  --br-space-xl: 4rem;
  --br-space-2xl: 6rem;
  --br-space-3xl: 8rem;
  --br-container: 1200px;
  --br-container-wide: 1400px;

  /* Typography */
  --br-font: "Inter", system-ui, sans-serif;
  --br-font-alt: "Manrope", "Inter", sans-serif;
  --br-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --br-tracking-tight: -0.04em;

  /* Motion */
  --br-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --br-ease-out: ease-out;
  --br-dur-micro: 150ms;
  --br-dur-btn: 200ms;
  --br-dur-card: 350ms;
  --br-dur-section: 700ms;
  --br-dur-hero: 1000ms;

  /* Layout */
  --br-header-h: 72px;
  --br-z-header: 1000;
  --br-z-modal: 2000;
  --br-z-cursor: 9999;
  --br-z-loader: 10000;
}

/* Glow utilities */
.glow-red {
  box-shadow: 0 0 40px rgba(255, 23, 68, 0.15);
}
.glow-red-soft {
  box-shadow: 0 0 60px rgba(255, 23, 68, 0.08);
}
.glow-red-strong {
  box-shadow: 0 0 50px rgba(255, 23, 68, 0.25);
}