/* ==========================================================================
   Storming Design System · tokens
   Fonte única de cor, tipo, espaço, forma e movimento do site.
   Regra da marca: preto é o chão, vermelho é a assinatura (um destaque por tela),
   branco quente é o texto. Números grandes sempre em Barlow Condensed.
   ========================================================================== */
:root {
  /* Cor · base */
  --c-ground: #0B0B0C;      /* fundo principal */
  --c-ground-2: #111113;    /* faixa alternada */
  --c-surface: #17171A;     /* cartões */
  --c-surface-2: #222226;   /* cartão elevado, trilhos de gráfico */
  --c-line: #2E2E33;        /* divisórias */
  --c-line-strong: #45454C;
  --c-ink: #F5F3F0;         /* texto principal */
  --c-muted: #A6A6AD;       /* texto de apoio (4.5:1 no ground) */
  --c-faint: #6E6E76;       /* legendas pequenas em fundo escuro, só 18px+ */

  /* Cor · marca */
  --c-red: #E1121B;         /* storm red: blocos, barras, botões */
  --c-red-hover: #C40F17;
  --c-red-text: #FF4A4F;    /* vermelho para texto sobre preto */
  --c-red-deep: #7A0A10;    /* segundo tom, faixas */
  --c-on-red: #FFFFFF;
  --c-ref: #5C5C64;         /* série de comparação em gráficos */

  /* Cor · papel (seções claras) */
  --c-paper: #F5F3F0;
  --c-paper-2: #EAE6DF;
  --c-paper-ink: #0B0B0C;
  --c-paper-muted: #55555C;
  --c-paper-line: #D9D5CF;
  --c-paper-red: #C8101A;

  /* Efeitos */
  --glow-red: 0 0 0 1px rgba(225,18,27,.35), 0 20px 80px -20px rgba(225,18,27,.55);
  --shadow-lg: 0 40px 120px -30px rgba(0,0,0,.75);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  --stripes: repeating-linear-gradient(102deg, rgba(245,243,240,.035) 0 2px, transparent 2px 64px);

  /* Tipo */
  --f-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --f-body: "Barlow", Arial, sans-serif;
  --fs-hero: clamp(5rem, 17vw, 15rem);      /* 80 → 240 */
  --fs-mega: clamp(3.5rem, 9vw, 8.5rem);    /* números de destaque */
  --fs-h1: clamp(2.75rem, 6.2vw, 5.5rem);   /* títulos de seção */
  --fs-h2: clamp(2rem, 3.6vw, 3.25rem);
  --fs-h3: clamp(1.5rem, 2.2vw, 2rem);
  --fs-lead: clamp(1.125rem, 1.5vw, 1.375rem);
  --fs-body: 1.0625rem;                      /* 17px */
  --fs-small: .9375rem;                      /* 15px */
  --fs-eyebrow: .8125rem;                    /* 13px, caixa alta espaçada */
  --lh-tight: .92;
  --lh-title: 1;
  --lh-body: 1.6;
  --tracking-eyebrow: .28em;

  /* Espaço (grade de 4px) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section-y: clamp(64px, 8vw, 112px);
  --wrap: 1240px;
  --gutter: max(20px, env(safe-area-inset-left, 0px));

  /* Forma */
  --r-0: 0px; --r-sm: 6px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;
  --skew: -12deg;           /* corte diagonal da marca */

  /* Movimento */
  --ease-out: cubic-bezier(.16, 1, .3, 1);   /* expo out: entradas */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: .18s; --t-base: .35s; --t-slow: .8s;

  /* Camadas */
  --z-nav: 50; --z-menu: 60; --z-grain: 70;
}