/* ════════════════════════════════════════════════════════════════════
   00-tokens.css — Westside WebTV Design System
   Single source of truth for ALL design tokens.
   NUNCA hardcode uma cor — use var(--w-*).
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand Colors ── */
  --w-red: #e60000;           /* primary — use this everywhere */
  --w-red-blood: #e60000;     /* alias (legacy compat) */
  --w-red-neon: #ff1a1a;      /* accent / hover / glow */
  --w-red-dark: #cc0000;      /* darker shade for hover states */

  /* ── Red Opacity Variants ── */
  --w-red-5: rgba(230, 0, 0, 0.05);   /* subtle backgrounds */
  --w-red-10: rgba(230, 0, 0, 0.10);  /* badges, highlights */
  --w-red-15: rgba(230, 0, 0, 0.15);  /* glass buttons */
  --w-red-20: rgba(230, 0, 0, 0.20);  /* active states */
  --w-red-30: rgba(230, 0, 0, 0.30);  /* hover glass, shadows */
  --w-red-40: rgba(230, 0, 0, 0.40);  /* borders, HUD */

  /* ── Neutrals ── */
  --w-black: #080808;          /* page background */
  --w-dark-gray: #111111;      /* card backgrounds */
  --w-hud-bg: #1a1a1a;         /* HUD, panels, inputs */
  --w-slate: #2a2a2a;          /* elevated surfaces */
  --w-border: #222222;         /* default border */
  --w-border-subtle: #1a1a1a;  /* subtle borders */
  --w-ash: #888888;            /* muted text */
  --w-white: #ffffff;          /* primary text */

  /* ── Semantic Colors ── */
  --w-success: #0cc880;        /* online, ok, live */
  --w-warning: #f80;           /* fura-fila, alert */
  --w-info: #6ac;              /* type badges */
  --w-gold: #da0;              /* tier, premium */

  /* ── Borders ── */
  --w-border-hud: var(--w-red-40);
  --w-border-card: var(--w-border);

  /* ── Spacing ── */
  --w-page-padding: 5%;
  --w-max-width: 1600px;
  --w-nav-height: 60px;
  --nav-height: 60px; /* legacy alias — theater/video reference this */

  /* ── Motion ── */
  --motion-fast: cubic-bezier(0.25, 1, 0.5, 1);
  --motion-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;

  /* ── Typography ── */
  --font-primary: 'Rajdhani', 'Segoe UI', Arial, sans-serif;
  --font-weight-normal: 400;
  --font-weight-bold: 600;
  --font-weight-black: 800;
  --font-weight-ultra: 900;

  /* ── Chat System ── */
  --chat-bg: rgba(8, 8, 12, 0.92);
  --chat-surface: rgba(255, 255, 255, 0.025);
  --chat-surface-hover: rgba(255, 255, 255, 0.05);
  --chat-border: rgba(255, 255, 255, 0.06);
  --chat-border-active: rgba(230, 0, 0, 0.35);
  --chat-msg-radius: 6px;
  --chat-input-bg: rgba(17, 17, 24, 0.95);
  --chat-input-border: rgba(255, 255, 255, 0.08);
  --chat-input-focus: rgba(230, 0, 0, 0.5);
  --chat-accent: var(--w-red);
  --chat-system-bg: rgba(34, 197, 94, 0.06);
  --chat-system-border: rgba(34, 197, 94, 0.2);
  --chat-online-glow: rgba(34, 197, 94, 0.4);
  --chat-reaction-bg: rgba(255, 255, 255, 0.06);
  --chat-reaction-active: rgba(230, 0, 0, 0.15);
  --chat-gold-glow: rgba(255, 215, 0, 0.25);
  --chat-silver-glow: rgba(192, 192, 192, 0.2);
  --chat-bronze-glow: rgba(205, 127, 50, 0.2);

  /* ── Z-Index Scale ── */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-nav: 1000;
  --z-modal: 2000;
  --z-player: 9000;
  --z-overlay: 9999;
}