/* ACR SCHOOL · tokens.css
   Cor, tipografia, espaco e forma. Unico arquivo com hexadecimal.
   Componente e pagina so consomem token semantico. */

/* ================= acr-tokens.css ================= */
:root{
  --acr-azul:#042542; --acr-dourado:#c9ad6a; --acr-branco:#f9f7f4;
  --acr-cinza-claro:#e3e2e0; --acr-cinza-escuro:#c7c6c4;
  --acr-azul-rgb:4,37,66; --acr-branco-rgb:249,247,244;

  --acr-surface:var(--acr-branco); --acr-surface-alt:var(--acr-cinza-claro);
  --acr-elevated:var(--acr-branco);   /* fundo de card dentro do contexto */
  --acr-ink:var(--acr-azul);
  --acr-ink-2:rgba(var(--acr-azul-rgb),.72);
  --acr-ink-3:rgba(var(--acr-azul-rgb),.55);
  --acr-line:rgba(var(--acr-azul-rgb),.12);
  --acr-line-2:var(--acr-cinza-claro);
  --acr-line-3:var(--acr-cinza-escuro);
  --acr-accent:var(--acr-dourado); --acr-on-accent:var(--acr-azul);
  --acr-accent-text:var(--acr-ink); --acr-focus:var(--acr-dourado);

  --acr-max:1280px; --acr-gutter:clamp(20px,4vw,48px); --acr-measure:66ch;

  /* alturas fixas viram token. A soma existe porque a topbar fica acima
     do header: âncora, sticky e menu precisam do total, não só da barra. */
  --acr-topbar-h:38px;
  --acr-header-h:76px;
  --acr-header-total:calc(var(--acr-topbar-h) + var(--acr-header-h));

  --acr-font-display:"Sofia Sans Extra Condensed","Arial Narrow",Arial,sans-serif;
  --acr-font-text:"Noto Serif",Georgia,"Times New Roman",serif;
  /* Interface: Inter, hospedada no proprio site.
     Historico da decisao, para ninguem refazer o caminho: a Sofia Sans foi
     adotada primeiro e descartada por leitura ruim em corpo pequeno; a
     fonte do sistema leu bem, mas muda de desenho entre Mac, Windows e
     Android, o que quebra a padronizacao. A Inter resolve os dois lados:
     desenho de interface e o mesmo arquivo para todo mundo.
     Ela nao esta no manual V.001, e face de interface e padrao adotado. */
  --acr-font-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  /* Navegação: menu, botão, link de ação e chip usam a condensada da marca,
     em peso mais leve que o dos títulos. Campo de formulário, legenda e
     texto pequeno continuam na Inter, porque condensada em 13 px cansa.
     Peso 600 foi escolhido na revisão: o 800 dos títulos pesava demais em
     item de menu. */
  --acr-font-nav:"Sofia Sans Extra Condensed","Arial Narrow",Arial,sans-serif;
  --acr-weight-nav:600;
  --acr-nav-size:15px;
  --acr-display-1:clamp(44px,8vw,104px);
  --acr-display-2:clamp(30px,4.4vw,46px);
  --acr-display-3:clamp(24px,2.4vw,30px);
  --acr-h3:19px; --acr-lede:19px; --acr-body:17px; --acr-ui:14px; --acr-label:12px;
  --acr-leading-display:.94; --acr-leading-h3:1.3; --acr-leading-lede:1.55;
  --acr-leading-body:1.65; --acr-leading-ui:1.45;
  --acr-tracking-display:.005em; --acr-tracking-label:.22em;
  --acr-tracking-nav:.08em; --acr-tracking-btn:.1em; --acr-tracking-micro:.24em;

  --acr-s1:8px; --acr-s2:16px; --acr-s3:24px; --acr-s4:32px;
  --acr-s5:48px; --acr-s6:64px; --acr-s7:96px; --acr-s8:128px;

  --acr-section-y:clamp(64px,8vw,112px);
  --acr-section-y-sm:clamp(40px,5vw,64px);
  --acr-head-gap:clamp(32px,4vw,56px);
  --acr-gap:var(--acr-s3);
  --acr-gap-lg:clamp(32px,5vw,72px);

  /* não é cor de marca: é o fundo das fotos de catálogo do fornecedor.
     Existe só para a moldura de produto encostar na foto sem emenda.
     Nunca usar como fundo de página, card ou faixa. */
  --acr-produto-bg:#ffffff;

  --acr-btn-py:15px; --acr-btn-px:30px;
  --acr-radius:0; --acr-radius-field:2px;
  --acr-rule:1px; --acr-rule-accent:2px; --acr-rule-accent-btn:3px;
  --acr-focus-offset:2px;

  --acr-ease:cubic-bezier(.2,.6,.2,1);
  --acr-dur-1:160ms; --acr-dur-2:260ms; --acr-dur-3:620ms;
  --acr-lift:4px; --acr-reveal:20px;

  --acr-bg-overlay:.62; --acr-bg-soft:.4; --acr-selo-watermark:.08;
  --acr-icon:28px;
}
[data-acr-surface="branco"]{
  --acr-surface:var(--acr-branco); --acr-surface-alt:var(--acr-cinza-claro);
  --acr-elevated:var(--acr-branco);
  --acr-ink:var(--acr-azul);
  --acr-ink-2:rgba(var(--acr-azul-rgb),.72);
  --acr-ink-3:rgba(var(--acr-azul-rgb),.55);
  --acr-line:rgba(var(--acr-azul-rgb),.12);
  --acr-line-2:var(--acr-cinza-claro);
  --acr-line-3:var(--acr-cinza-escuro);
  --acr-accent-text:var(--acr-ink);
  background:var(--acr-surface);color:var(--acr-ink);
}
[data-acr-surface="azul"]{
  --acr-surface:var(--acr-azul); --acr-surface-alt:var(--acr-azul);
  --acr-elevated:rgba(var(--acr-azul-rgb),.55);
  --acr-ink:var(--acr-branco);
  --acr-ink-2:rgba(var(--acr-branco-rgb),.78);
  --acr-ink-3:rgba(var(--acr-branco-rgb),.58);
  --acr-line:rgba(var(--acr-branco-rgb),.18);
  --acr-line-2:rgba(var(--acr-branco-rgb),.24);
  --acr-line-3:rgba(var(--acr-branco-rgb),.32);
  --acr-accent-text:var(--acr-dourado);
}