/* ==========================================================================
   SUPERFAST · DESIGN TOKENS
   Fonte unica de verdade do sistema visual. Nao defina cor, sombra, raio,
   duracao ou easing em outro arquivo - use as variaveis daqui.
   ========================================================================== */

:root {
  /* ---- Vermelho -----------------------------------------------------------
     "Se conquista": no maximo ~10% da tela. CTA, metrica ao vivo, estado ativo. */
  --red:              #E5000C;
  --red-bright:       #FF2030;
  --red-dark:         #A80008;

  /* Vermelho de TEXTO. O #E5000C e o vermelho de preenchimento (barras, CTA,
     bordas) e cumpre 4.84:1 com texto branco em cima. Como cor de texto sobre
     superficie, porem, ele fica em 3.9:1 no escuro e 4.3:1 no claro — abaixo
     do AA. Por isso rotulos, tags e numeros em vermelho usam este token. */
  --red-text:         #FF2030;   /* 4.94:1 sobre --surface-1 escuro */

  /* ---- Pretos em camadas (superficies) ---------------------------------- */
  --black:            #070708;
  --bg:               #0C0C0D;
  --surface-1:        #111113;
  --surface-2:        #191A1C;
  --surface-3:        #222326;

  /* ---- Texto e linhas --------------------------------------------------- */
  --text:             #FFFFFF;
  --text-silver:      #C8C8C8;
  --text-muted:       #888890;
  --border:           #2A2B2E;

  /* ---- Cores de estado dos callouts ------------------------------------- */
  --tip:              #16C46A;   /* [!TIP]     regra / boa pratica */
  --note:             #3B82F6;   /* [!NOTE]    apoio / CRM         */
  --warn:             #F5A524;   /* [!WARNING] atencao / pendencia */
  --caution:          var(--red);/* [!CAUTION] risco / nao fazer   */
  --tip-bg:           rgba(22, 196, 106, .07);
  --note-bg:          rgba(59, 130, 246, .07);
  --warn-bg:          rgba(245, 165, 36, .07);
  --caution-bg:       rgba(229, 0, 12, .07);

  /* ---- Tipografia: 4 familias, uma funcao cada -------------------------- */
  --font-display:     'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --font-label:       'Barlow Condensed', 'Segoe UI Condensed', system-ui, sans-serif;
  --font-body:        'Barlow', 'Segoe UI', system-ui, sans-serif;
  --font-mono:        'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;

  --fs-display:       clamp(48px, 7vw, 96px);
  --fs-title:         clamp(34px, 5vw, 60px);
  --fs-heading:       clamp(26px, 3.2vw, 38px);
  --fs-label:         clamp(18px, 2vw, 30px);
  --fs-label-sm:      clamp(13px, 1.1vw, 15px);
  --fs-body:          clamp(17px, 1.15vw, 19px);
  --fs-caption:       clamp(13px, .95vw, 15px);
  --fs-hud:           11px;

  --tracking-display: .01em;   /* +1%  */
  --tracking-label:   .14em;   /* +14% */
  --lh-display:       .95;
  --lh-body:          1.6;

  /* ---- Forma: cantos usinados, radius maximo 8px ------------------------ */
  --r-2:              2px;
  --r-4:              4px;
  --r-8:              8px;
  --border-thin:      1px solid var(--border);
  --border-accent:    3px;

  /* ---- Elevacao: sombra preta neutra, vinda de cima. Nunca colorida. ---- */
  --e1:               0 2px 8px rgba(0, 0, 0, .45);
  --e2:               0 6px 20px rgba(0, 0, 0, .55);
  --e3:               0 18px 48px rgba(0, 0, 0, .70);

  /* ---- Brilho vermelho: energia / foco / "ligado". Com parcimonia. ------ */
  --glow-soft:        0 0 0 1px rgba(229, 0, 12, .28), 0 4px 18px rgba(229, 0, 12, .14);
  --glow-focus:       0 0 0 2px rgba(229, 0, 12, .55), 0 6px 24px rgba(229, 0, 12, .22);
  --glow-hero:        0 0 60px rgba(229, 0, 12, .30), 0 0 140px rgba(229, 0, 12, .14);

  /* ---- Movimento: entra rapido, assenta suave. NUNCA quique. ------------ */
  --ease:             cubic-bezier(.16, 1, .3, 1);
  --t-fast:           120ms;
  --t-base:           180ms;
  --t-slow:           260ms;

  /* ---- Layout ----------------------------------------------------------- */
  --nav-h:            64px;
  --maxw:             1240px;
  --maxw-read:        820px;
  --gutter:           clamp(20px, 4vw, 48px);
  --card-pad:         clamp(18px, 2.2vw, 24px);

  /* ---- Texturas (trama de carbono + malha de pontos) -------------------- */
  --carbon:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, .016) 0px,
      rgba(255, 255, 255, .016) 1px,
      transparent 1px,
      transparent 5px
    );
  --dotmesh:
    radial-gradient(rgba(229, 0, 12, .16) 1px, transparent 1px);
  --dotmesh-size: 22px 22px;
}

/* ==========================================================================
   TEMA CLARO - opcional, mantido com o mesmo rigor do escuro.
   O vermelho da marca nao muda; o que muda e a camada de superficie.
   ========================================================================== */
:root[data-theme='light'] {
  --red-bright:       #F51122;
  --red-dark:         #A80008;
  --red-text:         #A80008;   /* 7.87:1 sobre branco */

  --black:            #FFFFFF;
  --bg:               #F4F4F5;
  --surface-1:        #FFFFFF;
  --surface-2:        #EDEDEF;
  --surface-3:        #E2E2E5;

  --text:             #0C0C0D;
  --text-silver:      #3F3F46;
  --text-muted:       #6B6B75;
  --border:           #D6D6DB;

  --tip:              #0E8F4C;
  --note:             #1D4ED8;
  --warn:             #A66200;
  --tip-bg:           rgba(14, 143, 76, .08);
  --note-bg:          rgba(29, 78, 216, .08);
  --warn-bg:          rgba(166, 98, 0, .08);
  --caution-bg:       rgba(229, 0, 12, .08);

  --e1:               0 1px 3px rgba(0, 0, 0, .10);
  --e2:               0 6px 20px rgba(0, 0, 0, .12);
  --e3:               0 18px 48px rgba(0, 0, 0, .18);

  --glow-soft:        0 0 0 1px rgba(229, 0, 12, .30), 0 4px 16px rgba(229, 0, 12, .12);
  --glow-focus:       0 0 0 2px rgba(229, 0, 12, .50), 0 6px 20px rgba(229, 0, 12, .18);
  --glow-hero:        0 0 50px rgba(229, 0, 12, .16), 0 0 120px rgba(229, 0, 12, .08);

  --carbon:
    repeating-linear-gradient(
      135deg,
      rgba(0, 0, 0, .022) 0px,
      rgba(0, 0, 0, .022) 1px,
      transparent 1px,
      transparent 5px
    );
  --dotmesh: radial-gradient(rgba(229, 0, 12, .13) 1px, transparent 1px);
}