/* ============================================================
   SB DIGITAL — DESIGN TOKENS

   Direção visual (set/2026): editorial, quente e sóbria.
   - Preto quente (e não preto azulado de template) + branco creme.
   - Laranja da marca como acento único, usado com parcimônia.
   - Serifa de exibição (Fraunces) para a voz + grotesca (Instrument
     Sans) para interface. Nada de tipografia padrão de gerador.
   - Cantos praticamente retos: o arredondamento é exceção, não regra.
   ============================================================ */

:root{
  /* ---------- superficies (preto quente) ---------- */
  --bg:            #0A0908;
  --bg-soft:       #100E0C;
  --bg-lift:       #16130F;
  --panel:         rgba(244,240,233,.026);
  --panel-2:       rgba(244,240,233,.05);
  --panel-3:       rgba(244,240,233,.075);
  --glass:         rgba(16,14,12,.72);

  /* ---------- linhas (fios de papel) ---------- */
  --line:          rgba(244,240,233,.1);
  --line-2:        rgba(244,240,233,.18);
  --line-3:        rgba(244,240,233,.28);

  /* ---------- texto ---------- */
  --txt:           #F4F0E9;
  --txt-2:         #BAB2A6;
  --txt-3:         #8B8377;
  --txt-4:         #5D564D;

  /* ---------- marca ---------- */
  --brand:         #FF6A21;
  --brand-hi:      #FF9152;
  --brand-lo:      #C74A12;
  --brand-deep:    #7A2A05;
  --brand-soft:    rgba(255,106,33,.1);
  --brand-line:    rgba(255,106,33,.34);
  --brand-glow:    rgba(255,106,33,.16);
  --crimson:       #8E1B2E;   /* dialoga com o fundo dos ensaios */

  /* ---------- semanticas ---------- */
  --ok:            #4FBF87;
  --warn:          #E0A32F;
  --danger:        #E4593F;
  --info:          #5C9CFF;

  /* ---------- superfícies da marca ----------
     Cores sólidas no lugar de degradês. */
  --grad-brand:    #FF6A21;
  --grad-text:     #F4F0E9;
  --grad-line:     linear-gradient(90deg, transparent, rgba(244,240,233,.12), transparent);
  --grad-panel:    linear-gradient(rgba(244,240,233,.02), rgba(244,240,233,.02));

  /* ---------- sombras (discretas, quentes) ---------- */
  --sh-sm:   0 1px 2px rgba(0,0,0,.4);
  --sh-md:   0 10px 26px -18px rgba(0,0,0,.85);
  --sh-lg:   0 30px 60px -40px rgba(0,0,0,.9);
  --sh-glow: 0 0 0 1px var(--brand-line);

  /* ---------- raios ----------
     Quase retos: cartão de papel, não bolha de template. */
  --r-xs: 1px;
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;
  --r-xl: 6px;
  --r-full: 999px;   /* só para avatares e o botão flutuante */

  /* ---------- tipografia ----------
     Fraunces: serifa com caráter, para títulos e números.
     Instrument Sans: grotesca de interface, para leitura. */
  --f-serif:   "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-display: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-sans:    "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono:    "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --t-hero:  clamp(2.9rem, 5.6vw, 5.1rem);
  --t-h2:    clamp(2rem, 3.9vw, 3.35rem);
  --t-h2-sm: clamp(1.6rem, 2.6vw, 2.2rem);
  --t-h3:    clamp(1.12rem, 1.6vw, 1.35rem);
  --t-lead:  clamp(1.04rem, 1.25vw, 1.16rem);
  --t-body:  1.0625rem;
  --t-sm:    .9375rem;
  --t-xs:    .8125rem;
  --t-mono:  .78rem;

  /* ---------- ritmo ---------- */
  --gutter:   clamp(20px, 4.6vw, 48px);
  --wrap:     1240px;
  --sec-y:    clamp(64px, 7vw, 116px);
  --head-gap: clamp(30px, 3.6vw, 52px);
  --nav-h:    78px;

  /* ---------- movimento ----------
     Variáveis usadas pelas animações contínuas. Com movimento reduzido
     elas ficam mais suaves, sem desligar a página inteira. */
  --ease:        cubic-bezier(.22,.68,.28,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-in:     cubic-bezier(.7,0,.84,0);
  --sp-fast:     .22s;
  --sp:          .42s;
  --sp-slow:     .8s;
  --float-y:     -11px;   /* amplitude da flutuação dos elementos */
  --reveal-y:    22px;    /* deslocamento da entrada ao rolar */
  --motion-slow: 1;       /* multiplicador de duração dos loops */
}

@media (max-width: 860px){
  :root{ --nav-h: 66px; --float-y: -8px; }
}

/* monitores grandes: mais respiro e tipografia proporcional */
@media (min-width: 1600px){
  :root{
    --wrap: 1320px;
    --t-hero: clamp(2.9rem, 5vw, 5.6rem);
    --t-h2: clamp(2rem, 3.4vw, 3.7rem);
  }
}
@media (min-width: 1920px){
  :root{
    --wrap: 1420px;
    --t-body: 1.1rem;
    --t-lead: 1.22rem;
  }
}

/* Movimento reduzido (ex.: Windows com "Efeitos de animação" desligado).
   Mantém a página viva, mas com movimentos menores e sem efeitos amplos. */
@media (prefers-reduced-motion: reduce){
  :root{
    --float-y: -4px;
    --reveal-y: 10px;
    --motion-slow: 1.6;
  }
}