/* ============================================================
   STINT · tokens
   Paleta CLARA (osso), com a estrutura do mock stint-website-one. Decisao de 11/09/2026.
   O verde #77E40D e o teal #0C343D vem do StintHub; a escala asfalto vem do mock.
   A classe .deep no fim do arquivo e o bloco ESCURO, para contraste pontual.
   ============================================================ */

:root {
  /* ---- superficies: osso, o mesmo tom claro que o proprio mock usa ---- */
  --bg:          #F2F0EB;   /* fundo da pagina */
  --surface:     #E9E5DC;   /* faixas de respiro, nav, ticker */
  --surface-2:   #DFDACE;   /* faixa mais densa */
  --surface-teal:#E4EBEA;

  --card:        #FFFFFF;
  --card-2:      #F8F6F1;

  /* ---- contraste invertido (bloco escuro, uso pontual) ---- */
  --deep:        #070605;   /* preto mais fundo; mantem leve calor para casar com o osso */
  --deep-2:      #0E0C0B;
  --on-deep:     #F2F0EB;
  --on-deep-mut: rgba(242,240,235,.70);

  /* ---- linhas ---- */
  --border:      rgba(11,11,12,.16);
  --border-2:    rgba(11,11,12,.30);

  /* ---- texto ---- */
  --text:        #0B0B0C;
  --muted:       rgba(11,11,12,.72);
  --muted-2:     rgba(11,11,12,.54);
  --label:       #3E8A06;

  /* ---- acento ---- */
  --accent:      #5BB80A;
  --accent-h:    #6CCF12;
  --accent-p:    #4A9908;
  --accent-dim:  rgba(91,184,10,.12);
  --accent-line: rgba(91,184,10,.45);
  --on-accent:   #0B0B0C;

  /* ---- estado ---- */
  --error:       #C81E33;
  --warn:        #9A6B00;
  --ok:          #15803D;

  /* ---- tipografia ---- */
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-serif:   'Bree Serif', Georgia, serif;
  --font-mono:    'Poppins', -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  --fs-hero:  clamp(2.05rem, 1.15rem + 4.0vw, 4.25rem);
  --fs-h2:    clamp(1.6rem, 1.15rem + 1.9vw, 2.65rem);
  --fs-h3:    clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  --fs-lead:  clamp(1.02rem, 0.96rem + 0.34vw, 1.18rem);
  --fs-body:  1rem;
  --fs-sm:    .9375rem;
  --fs-label: .72rem;

  --lh-tight: 1.02;
  --lh-head:  1.14;
  --lh-body:  1.68;
  --ls-label: .16em;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;
  --section-y: clamp(48px, 5.5vw, 88px);

  --container:        1360px;
  --container-wide:   1600px;   /* hero: encosta mais nas bordas */
  --container-narrow: 780px;
  --gutter:           clamp(20px, 5vw, 48px);

  --r-sm: 4px;  --r: 6px;  --r-lg: 10px;  --r-pill: 999px;
  --shadow:    0 1px 2px rgba(28,22,12,.06);
  --shadow-md: 0 8px 32px rgba(28,22,12,.10);
  --shadow-lg: 0 16px 56px rgba(28,22,12,.14);

  --dur-fast: .12s;
  --dur:      .20s;
  --ease:     cubic-bezier(.2,.8,.2,1);

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

/* Bloco de contraste: inverte os papeis dos tokens.
   Hoje usado na barra de navegacao e em 3 secoes (virada, flop, chamada final),
   alternando com as claras. Acrescentar mais dilui o efeito. */
.deep {
  --bg:       var(--deep);
  --surface:  var(--deep-2);
  --card:     rgba(255,255,255,.05);
  --card-2:   rgba(255,255,255,.03);
  --text:     var(--on-deep);
  --muted:    var(--on-deep-mut);
  --muted-2:  rgba(242,240,235,.54);
  --border:   rgba(242,240,235,.14);
  --border-2: rgba(242,240,235,.24);
  --accent:   #77E40D;
  --on-accent:#08211A;
  --label:    #77E40D;
  --error:    #F5304A;   /* o #C81E33 do claro perde contraste sobre o preto */
  --shadow:   none;
  --focus-ring: 0 0 0 2px var(--deep), 0 0 0 4px var(--accent);
  background: var(--bg);
  color: var(--text);
}