/* ============================================================
   Zacora — tokens de design (fonte única de verdade)

   Carregado ANTES de qualquer outro CSS, tanto na home de
   marketing (home.html) quanto no painel (index.html).

   Se você precisar mudar uma cor, um espaçamento ou uma fonte
   do produto inteiro, mude AQUI — e só aqui.
   ============================================================ */
:root {
  /* ── Cores: superfícies ─────────────────────────────────── */
  --bg: #f5f7f4;
  --surface: rgba(255, 255, 255, 0.86);
  --surface-solid: #ffffff;
  --surface-sunken: #f1f5f2;

  /* ── Cores: texto ───────────────────────────────────────── */
  --ink: #0e2a23;
  --ink-2: #183c32;
  --muted: #697a73;
  --muted-2: #8a9a93;

  /* ── Cores: marca e estados ─────────────────────────────── */
  --brand: #139b5a;
  --brand-2: #0a6f42;
  --brand-3: #24bd72;
  --brand-soft: #dcf6e8;
  --night: #081f1a;
  --night-2: #0d3027;
  --line: #dfe8e2;
  --line-soft: rgba(223, 232, 226, 0.82);
  --warning: #e79d31;
  --warning-ink: #8a5c10;
  --warning-soft: #fff3dd;
  --danger: #c84636;
  --danger-soft: #f6e5df;
  --blue: #2f72e8;

  /* ── Cores sobre fundo escuro ───────────────────────────── */
  --on-dark: #edf8f3;
  --on-dark-70: rgba(237, 248, 243, 0.72);
  --on-dark-45: rgba(237, 248, 243, 0.46);
  --on-dark-08: rgba(255, 255, 255, 0.08);
  --on-dark-14: rgba(255, 255, 255, 0.14);

  /* ── Aliases herdados ───────────────────────────────────────
     Nomes que já existiam espalhados no código. Ficam apontando
     para o token real para nada quebrar. Não use em código novo. */
  --texto-suave: var(--muted);
  --borda: var(--line);
  --paper: var(--bg);
  --card: var(--surface-solid);
  --brand-deep: var(--brand-2);
  --amber: var(--warning);

  /* ── Espaçamento: escala base 4px ───────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ── Tipografia ─────────────────────────────────────────── */
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --lh: 1.5;

  /* ── Raios ──────────────────────────────────────────────────
     Cantos discretos. Raio grande em card grande faz a interface
     parecer brinquedo; o olho lê "app de verdade" quando a curva
     é sutil e constante em todos os tamanhos de elemento. */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-full: 999px;
  --radius: var(--r-lg);

  /* ── Sombras ────────────────────────────────────────────────
     Quem separa os blocos é a BORDA, não a sombra. A sombra só
     insinua elevação — duas camadas curtas, como em papel real.
     Sombra difusa e larga embaixo de tudo é a marca registrada de
     template genérico. */
  --shadow: 0 1px 3px rgba(15, 42, 35, 0.07), 0 1px 2px rgba(15, 42, 35, 0.04);
  --shadow-soft: 0 1px 2px rgba(15, 42, 35, 0.05);
  --shadow-alto: 0 8px 24px rgba(15, 42, 35, 0.10), 0 2px 6px rgba(15, 42, 35, 0.05);

  /* ── Foco ───────────────────────────────────────────────────
     Anel com afastamento, em vez de brilho colorido difuso. */
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(19, 155, 90, 0.55);

  /* ── Pesos ──────────────────────────────────────────────────
     800 em tudo é grito. Título 600, texto forte 550, corpo 400. */
  --peso-titulo: 600;
  --peso-forte: 550;

  /* ── Layout ─────────────────────────────────────────────── */
  --tap: 44px;              /* alvo mínimo de toque (WCAG 2.5.5) */
  --sidebar-w: 282px;
  --gutter: var(--sp-4);
  --z-drawer: 60;
  --z-backdrop: 55;
  --z-modal: 80;
}