/* =====================================================================
   FTW × STREET FIGHTER · DESIGN TOKENS
   Fonte única de verdade. Usado pela LP (styles.css) e pelo design system.
   Espelhado em design-system/tokens.json.
   ===================================================================== */
:root {
  /* ---- Cor · superfícies ---- */
  --bg: #07060a;            /* fundo da página */
  --bg-2: #0d0a10;          /* seções alternadas */
  --card: #110d14;          /* cards, painéis */
  --card-2: #18121b;        /* inputs, opções, chips */
  --ink: #160600;           /* texto sobre dourado, contorno arcade */

  /* ---- Cor · texto ---- */
  --text: #fff7ea;                        /* 18.9:1 no bg */
  --muted: rgba(255, 240, 220, 0.66);     /* 7.9:1 */
  --dim: rgba(255, 240, 220, 0.5);        /* 4.8:1 · mínimo pra texto */

  /* ---- Cor · linhas ---- */
  --line: rgba(255, 214, 120, 0.12);
  --line-2: rgba(255, 214, 120, 0.26);

  /* ---- Cor · marca ---- */
  --red: #e3001b;           /* só texto ≥24px, bordas e fundos */
  --red-2: #ff3b1f;         /* vermelho pra texto pequeno · 5.7:1 */
  --red-deep: #7a0010;      /* sombra dura de títulos */
  --red-shadow: #8a000f;    /* sombra dura de botões */
  --gold: #ffb400;          /* acento principal · 11.3:1 */
  --gold-2: #ffe27a;        /* destaque claro · preços, nomes */
  --orange: #ff7a00;        /* final dos degradês */

  /* ---- Cor · estado ---- */
  --locked: #ff2a4a;        /* chefão, bloqueado */
  --error: #ff6b7f;
  --success: var(--gold-2);
  --energy: #5aaaff;        /* efeito de energia do cursor */

  /* ---- Cor · lutadores (acento por personagem) ---- */
  --fighter-ryu: #35c4e0;
  --fighter-chunli: #ff2d6f;
  --fighter-blanka: #7ee83a;
  --fighter-cammy: #ff5fb0;
  --fighter-ken: #ff9a1f;
  --fighter-akuma: #b04cff;

  /* ---- Degradês ---- */
  --grad-title: linear-gradient(180deg, #fff6c2 0%, #ffb400 38%, #ff7a00 72%, #e3001b 100%);
  --grad-button: linear-gradient(180deg, #ffe27a 0%, #ffb400 46%, #ff7a00 100%);
  --grad-hp: linear-gradient(180deg, #fff9b0 0%, #ffe14d 45%, #ffb400 100%);
  --grad-damage: linear-gradient(180deg, #ff5a3d, #b8000f);
  --stripes: repeating-linear-gradient(-45deg, #ffb400 0 18px, #ffcb3d 18px 36px);
  --hazard: repeating-linear-gradient(-45deg, #ffb400 0 16px, #160600 16px 32px);

  /* ---- Tipografia ---- */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;
  --fw-black: 900;
  --fs-display: clamp(40px, 8.4vw, 116px);
  --fs-h1: clamp(34px, 5.8vw, 80px);
  --fs-h2: clamp(32px, 4.8vw, 60px);
  --fs-h3: clamp(24px, 3vw, 34px);
  --fs-title: 24px;
  --fs-body-l: clamp(16px, 1.5vw, 19px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-label: 12px;
  --fs-micro: 11px;
  --ls-display: -0.035em;
  --ls-label: 0.14em;
  --ls-button: 0.06em;
  --lh-display: 0.92;
  --lh-body: 1.55;

  /* ---- Espaço (base 4) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ---- Layout ---- */
  --maxw: 1200px;
  --gutter: clamp(16px, 4vw, 28px);
  --section: clamp(64px, 9vw, 120px);
  --annbar: 36px;
  --navh: 68px;
  --header: calc(var(--annbar) + var(--navh));

  /* ---- Forma ---- */
  --radius-sm: 3px;
  --radius: 4px;
  --border: 1px;
  --border-strong: 2px;
  --slant: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  --skew: skewX(-14deg);

  /* ---- Controles ---- */
  --control-sm: 42px;
  --control-md: 52px;
  --control-lg: 60px;

  /* ---- Sombras ---- */
  --outline-arcade: 0 0 0 4px var(--ink);
  --shadow-hard: 0 5px 0 var(--red-shadow);
  --glow-red: 0 0 30px rgba(227, 0, 27, 0.35);
  --glow-gold: 0 0 40px rgba(255, 180, 0, 0.15);
  --shadow-float: 0 40px 80px -40px rgba(227, 0, 27, 0.6);

  /* ---- Movimento ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-punch: cubic-bezier(0.18, 1.6, 0.35, 1);
  --dur-fast: 200ms;
  --dur: 250ms;
  --dur-slow: 700ms;

  /* ---- Camadas ---- */
  --z-nav: 110;
  --z-annbar: 120;
  --z-fx: 9985;
  --z-scanlines: 9990;
  --z-toast: 9995;
  --z-preloader: 9999;
}