/* =============================================================
   marca.css — CAMADA "CONFIGURAÇÃO DO CLIENTE"
   Só tokens. Trocar de cliente é trocar este arquivo.
   O motor (estilo.css) não conhece nenhuma cor ou fonte.

   Identidade oficial André Tomaz: D:\Andre\ESTUDIO\config\brand.config.ts
   Proporção de uso: preto 62% · pergaminho 22% · aço 10% · âmbar 6%.
   ============================================================= */

:root{
  /* ---------- COR ---------- */
  --obsidiana:   #0B0B0C;   /* fundo principal */
  --grafite:     #16161A;   /* blocos e cartões */
  --grafite-2:   #1C1C21;   /* elevação */
  --linha:       #26262C;   /* estrutura construída (o fio que esfriou) */
  --aco:         #7C7C82;   /* SÓ traço decorativo. Reprova AA como texto. */
  --texto-2:     #8E8E96;   /* texto secundário (5,9:1 sobre obsidiana) */
  --pergaminho:  #EDE7DB;   /* texto principal, off-white quente */
  --branco:      #FFFFFF;
  --ambar:       #C8852E;   /* acento único: a luz do desenho */
  --ambar-claro: #E0A24E;   /* ênfase da frase âncora */

  /* aliases semânticos (o motor usa só estes) */
  --fundo:       var(--obsidiana);
  --fundo-alt:   var(--grafite);
  --texto:       var(--pergaminho);
  --destaque:    var(--ambar);

  /* ---------- TIPOGRAFIA ---------- */
  --f-display:   'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --f-corpo:     'Inter', ui-sans-serif, system-ui, sans-serif;
  --f-editorial: 'Newsreader', ui-serif, Georgia, serif;

  --t-olho:      clamp(10.5px, .78vw, 12px);
  --t-corpo:     clamp(16px, 1.02vw, 17.5px);
  --t-lead:      clamp(17.5px, 1.42vw, 21px);
  --t-h3:        clamp(19px, 1.55vw, 22px);
  --t-h2:        clamp(29px, 4.6vw, 60px);
  --t-display:   clamp(31px, 4.9vw, 66px);
  --t-numeral:   clamp(88px, 24vw, 280px);

  /* ---------- GRADE E RITMO ---------- */
  --coluna:      min(100% - 2 * var(--goteira), 1120px);
  --goteira:     clamp(20px, 5vw, 64px);
  --secao:       clamp(84px, 11vw, 168px);

  /* ---------- MOVIMENTO ---------- */
  --e-saida:  cubic-bezier(.16, 1, .30, 1);    /* revelação */
  --e-regua:  cubic-bezier(.65, 0, .35, 1);    /* plotagem mecânica */
  --e-micro:  cubic-bezier(.20, .60, .20, 1);  /* hover e foco */
  --d-regua:  520ms;
  --d-texto:  820ms;
  --d-micro:  180ms;
  --stagger:  90ms;

  /* ---------- SEGURANÇA DE TELA ---------- */
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
}

@media (max-width: 820px){
  :root{ --stagger: 55ms; }
}