/* ==========================================================================
   CWB RUNNER — Design Tokens
   Cores oficiais: Vermelho #B01917 / Preto #202020 / Branco #FAFAFA
   Tipografia: PRSNT WIP077 (display/títulos) + Poppins (corpo)
   ========================================================================== */

:root {
  /* Cores — base neutra (preto oficial CWB = #202020) */
  --black: #202020;
  --black-deep: #111111;
  --gray-950: #191919;
  --gray-900: #202020;
  --gray-800: #2b2b2b;
  --gray-700: #3a3a3a;
  --gray-500: #666666;
  --gray-400: #8a8a8a;
  --gray-300: #b8b8b8;
  --gray-200: #d4d4d4;
  --white: #fafafa;

  /* Cores — acento CWB Runner (vermelho oficial #B01917) */
  --accent-cyan: #b01917;      /* acento principal — vermelho CWB */
  --accent-lime: #d4817f;      /* vermelho claro */
  --accent-magenta: #8c1412;   /* vermelho escuro */

  /* Superfícies */
  --surface-0: var(--black);
  --surface-1: var(--gray-950);
  --surface-2: var(--gray-900);
  --text-primary: var(--white);
  --text-secondary: var(--gray-300);
  --text-tertiary: var(--gray-500);
  --line-soft: rgba(250, 250, 250, 0.06);
  --line-mid: rgba(250, 250, 250, 0.12);
  --line-strong: rgba(250, 250, 250, 0.22);

  /* Glass */
  --glass-bg: rgba(28, 20, 20, 0.55);
  --glass-bg-strong: rgba(18, 12, 12, 0.75);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-highlight: rgba(255, 255, 255, 0.04);

  /* Tipografia */
  --font-display: "PRSNT WIP077", "Arial Black", Impact, sans-serif;
  --font-body:    "Poppins", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display: clamp(26px, 3.4vw, 52px);
  --fs-h1: clamp(24px, 3vw, 46px);
  --fs-h2: clamp(19px, 2.2vw, 34px);
  --fs-h3: clamp(15px, 1.5vw, 21px);
  --fs-sub: clamp(13px, 1.1vw, 16px);
  --fs-body: clamp(13px, 0.9vw, 15px);
  --fs-caption: clamp(11px, 0.75vw, 12px);
  --fs-micro: 11px;

  --lh-tight: 0.95;
  --lh-snug: 1.08;
  --lh-base: 1.55;
  --lh-loose: 1.7;

  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-body: -0.003em;
  --tracking-eyebrow: 0.06em;

  /* Espaçamento */
  --gutter: clamp(20px, 3.5vw, 64px);
  --section-y: clamp(48px, 7vh, 96px);
  --section-y-tight: clamp(32px, 5vh, 64px);
  --container: 1440px;

  /* Raios */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Easings — cinematográficos */
  --ease-cinematic: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-precise: cubic-bezier(0.83, 0, 0.17, 1);

  /* Durações */
  --d-fast: 280ms;
  --d-base: 600ms;
  --d-slow: 1000ms;
  --d-cine: 1600ms;
  --d-intro: 3800ms;

  /* Sombras */
  --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 24px 60px rgba(0, 0, 0, 0.45);
  --shadow-glass: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 80px rgba(0, 0, 0, 0.5);
  --shadow-deep: 0 60px 120px rgba(0, 0, 0, 0.6);

  /* Z-index */
  --z-base: 1;
  --z-content: 10;
  --z-hud: 80;
  --z-nav: 90;
  --z-dock: 95;
  --z-cursor: 100;
  --z-transition: 200;
}

/* Marca noturna — esquema escuro forçado */
html { color-scheme: dark; }