/* =============================================
   DIAGNÓSTICO BANZI × BRAVÊ — design tokens
   Alinhado à paleta greige do Home novo DS (tokens de
   apps/site-greige, Figma Banzi 2026, 2026-08-17).
   Paleta fechada (Aline, 17/08): escuro #272629, claro #CAC7BF,
   acento #C8FDAB, creme #FCF7E8 somente em texto.
   Display Space Grotesk + Figtree.
   ============================================= */

:root {
  /* ---- superfícies ---- */
  /* paper: fundo do projeto = greige #CAC7BF. --cream segue como o claro sobre a tinta. */
  --paper: #CAC7BF;        /* fundo base de todo o projeto */
  --paper-2: #CAC7BF;      /* claro é sempre greige; separação por filete e sombra */
  --paper-raised: #CAC7BF;
  --cream: #FCF7E8;        /* claro sobre a tinta (texto de rota, botão, seleção) */
  --cream-2: var(--paper-2);      /* compat: usos de fundo antigos apontam pro greige */
  --cream-raised: var(--paper-raised);
  --ink: #272629;
  --ink-70: rgba(39, 38, 41, 0.7);
  --ink-55: rgba(39, 38, 41, 0.55);
  --ink-40: rgba(39, 38, 41, 0.4);
  --ink-25: rgba(39, 38, 41, 0.25);
  --line: rgba(39, 38, 41, 0.14);
  --line-strong: rgba(39, 38, 41, 0.32);

  /* sobre a tinta (única faixa escura: o CTA) — tema dark da paleta greige */
  --on-ink: #FCF7E8;
  --on-ink-60: rgba(252, 247, 232, 0.6);
  --on-ink-35: rgba(252, 247, 232, 0.35);
  --on-ink-line: rgba(252, 247, 232, 0.12);

  /* ---- tipografia (DS Banzi) ---- */
  --font: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --display: "space-grotesk-variable", "Figtree", ui-sans-serif, sans-serif;

  /* display: condensada, caixa alta, colada */
  --fz-giant: clamp(3.4rem, min(12vw, 17svh), 12rem);
  --fz-mega: clamp(2.6rem, 8.5vw, 8rem);
  --fz-big: clamp(2rem, 5vw, 4.4rem);

  /* texto */
  --fz-h1: clamp(1.9rem, 4vw, 3.4rem);
  --fz-h2: clamp(1.5rem, 2.6vw, 2.4rem);
  --fz-h3: clamp(1.15rem, 1.6vw, 1.45rem);
  --fz-lead: clamp(1.08rem, 1.5vw, 1.35rem);
  --fz-body: 1.0625rem;
  --fz-small: 1rem;       /* piso para conteúdo e controles */
  --fz-meta: 0.9rem;      /* exceção: metadado informativo discreto */
  --fz-tiny: 0.8rem;      /* exceção: badge e marcador editorial */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-display: 0.9;
  --lh-tight: 1.02;
  --lh-snug: 1.16;
  --lh-body: 1.6;
  --lh-reading: 1.65;
  --lh-lead: 1.55;

  --ls-display: 0.005em;
  --ls-h: -0.025em;

  /* ---- espaço ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --sp-32: 128px; --sp-40: 160px;

  --radius-full: 999px;
  --radius-img: 2px;
  --radius-card: clamp(16px, 2vw, 26px);

  /* acento lima, o mesmo da paleta nova */
  --accent: #C8FDAB;
  --accent-text: var(--ink);

  /* largura única de container — todo bloco de conteúdo usa esta */
  --maxw: 1320px;
  --gutter: clamp(20px, 4.5vw, 72px);

  /* grão fino de papel */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");

  --ease: cubic-bezier(0.22, 0.61, 0.18, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 160ms;
  --t-base: 320ms;
  --t-slow: 640ms;

  /* mapeamento ativo */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-soft: var(--ink-55);
  --fg-faint: var(--ink-40);
  --hair: var(--line);
  --hair-strong: var(--line-strong);
}

/* home escura: grafite + creme, a abertura do site da Banzi.
   Aplicada no <html> da landing; as outras páginas seguem claras. */
.theme-dark {
  --bg: #272629; /* grafite, o escuro do site */
  --fg: var(--on-ink);
  --fg-soft: var(--on-ink-60);
  --fg-faint: var(--on-ink-35);
  --hair: var(--on-ink-line);
  --hair-strong: rgba(252, 247, 232, 0.4);
}

/* seção clara dentro da home escura (o revezamento de fundos do site):
   o bloco pinta o próprio fundo claro e devolve a leitura de tinta */
.on-paper {
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-soft: var(--ink-55);
  --fg-faint: var(--ink-40);
  --hair: var(--line);
  --hair-strong: var(--line-strong);
  color: var(--fg);
}

/* seções sobre tinta */
.on-ink {
  --bg: var(--ink);
  --fg: var(--on-ink);
  --fg-soft: var(--on-ink-60);
  --fg-faint: var(--on-ink-35);
  --hair: var(--on-ink-line);
  --hair-strong: rgba(252, 247, 232, 0.4);
  background: var(--ink);
  color: var(--on-ink);
}