/* Tokens · tema do operador Blaze — medido em blaze.bet.br (CDP, 18/09/2026)
 * fundo #090808 · superfície #161515 (163×) · vermelho #F12C4C · texto #FFF / #BCBFC7 / #96999F
 * raio 8px (54×) e 4px (50×) · sombra única 0 3px 10px rgba(6,10,14,.15) · anel interno 1px branco 10%
 * fontes: Inter (interface, como a Blaze) + Figtree (títulos; substituto livre da SofiaPro)
 */
:root {
  color-scheme: dark;

  --color-page:        #090808;
  --color-surface:     #161515;
  --color-surface-2:   #1e1d1d;
  --color-surface-3:   #222222;
  --color-hover:       rgba(255, 255, 255, 0.07);
  --color-ring:        rgba(255, 255, 255, 0.10);
  --color-line:        #1e1d1d;
  --color-line-2:      #2c2b2b;

  --color-ink:         #ffffff;
  --color-text:        #bcbfc7;
  --color-muted:       #96999f;

  --color-red:         #f12c4c;
  --color-red-hover:   #e81538;
  --color-red-press:   #c9102f;
  --color-red-deep:    #790f22;
  --color-on-red:      #ffffff;
  --color-focus:       #ffd166;

  /* fundos de arte (mesmo recurso da Blaze: brilho radial vinho sobre preto) */
  --color-wine:        rgba(120, 12, 48, 0.55);
  --color-wine-0:      rgba(120, 12, 48, 0);
  --color-night:       rgba(22, 30, 121, 0.35);
  --color-night-0:     rgba(22, 30, 121, 0);
  --color-scrim:       rgba(9, 8, 8, 0.76);
  --color-drop:        rgba(0, 0, 0, 0.6);

  /* roleta: vermelho e preto como o Double, setor branco com a chama */
  --color-wheel-red:   #f12c4c;
  --color-wheel-black: #1b1a1a;
  --color-wheel-white: #f4f4f5;
  --color-wheel-rim:   #0d0c0c;
  --color-lamp:        #ffffff;
  --color-lamp-off:    #5a2230;

  /* faixa clara (linha do tempo curta / folhas) */
  --color-sheet:       #f4f4f5;
  --color-sheet-ink:   #161515;

  --font-display: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, monospace;

  --text-2xs: 0.75rem;
  --text-xs:  0.8125rem;
  --text-sm:  0.875rem;
  --text-base: 1rem;
  --text-md:  1.125rem;
  --text-lg:  clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --text-xl:  clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --text-2xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --text-display: clamp(2rem, 1.2rem + 2.4vw, 3.25rem);

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.6;

  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-round: 999px;

  --shadow: 0 3px 10px rgba(6, 10, 14, 0.15);
  --shadow-pop: 0 8px 20px rgba(0, 0, 0, 0.45);

  --measure: 68ch;
  --content: 1120px;
  --side-w: 248px;
  --gutter: 16px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spin: cubic-bezier(0.12, 0.8, 0.12, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;
  --dur-spin: 5200ms;

  --z-sticky: 200;
  --z-side: 250;
  --z-top: 300;
  --z-overlay: 400;
  --strip-h: 30px;
  --top-h: 64px;
  --bar-h: 0px;
}
@media (min-width: 48rem) { :root { --gutter: 24px; } }
@media (min-width: 75rem) { :root { --gutter: 32px; } }