/* OrganicFlow · tokens da identidade (v1, 02/11/2026)
   Use no site estático (link direto) e no app (importe no globals.css).
   Fonte única: brand/tokens.json. Tema escuro por prefers-color-scheme ou [data-tema="escuro"];
   [data-tema="claro"] em qualquer elemento fixa o claro naquele trecho. */

:root,
[data-tema="claro"] {
  /* Marca */
  --of-verde: #0E5A3C;          /* ação primária, links, títulos de destaque */
  --of-verde-hover: #0B4A31;    /* hover/pressionado da ação primária */
  --of-verde-escuro: #0A3F2A;   /* faixa de CTA final, rodapé */
  --of-sobre-verde: #FFFFFF;    /* texto e ícone sobre --of-verde */
  --of-verde-marca: #0E5A3C;    /* não muda no escuro: capa, faixa de CTA */
  --of-folha: #4FA83A;          /* acento: 1 por tela. Número, check, ponto vivo. Nunca texto corrido */
  --of-folha-texto: #2F7D24;    /* quando o acento precisa ser texto (4.9:1 no fundo) */
  --of-selo: #E8F5EE;           /* fundo de selo, pill, ícone em quadrado */

  /* Superfícies */
  --of-fundo: #F7FBF9;          /* fundo da página */
  --of-alt: #F1F6F3;            /* seção alternada */
  --of-papel: #FFFFFF;          /* card, campo, painel */

  /* Texto */
  --of-tinta: #0F172A;          /* títulos e corpo forte */
  --of-tinta-2: #334155;        /* corpo */
  --of-tinta-3: #5B6676;        /* legenda, rótulo auxiliar (5.3:1 no --of-alt) */

  /* Linhas */
  --of-borda: #E2E8F0;          /* divisória e borda de card (decorativa) */
  --of-borda-forte: #CFD8D3;    /* borda de botão secundário, card em hover */
  --of-borda-campo: #7A8C82;    /* borda de campo e controle (3.4:1, exigido para controles) */
  --of-foco: #0E5A3C;           /* anel de foco: 2px sólido, 2px de afastamento */

  /* Estados (sempre com ícone ou palavra junto) */
  --of-ok: #2F7D24;  --of-ok-suave: #E8F5EE;
  --of-atencao: #A15C07;  --of-atencao-suave: #FCF0DC;
  --of-erro: #B42318;  --of-erro-suave: #FEF3F2;

  /* Ilustração (as SVGs da pasta brand leem estas variáveis quando inline) */
  --ofi-tinta: #0E5A3C;
  --ofi-acento: #4FA83A;
  --ofi-nevoa: #D5E7DC;
  --ofi-papel: #FFFFFF;

  /* Tipografia */
  --of-fonte-titulo: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --of-fonte-corpo: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --of-display: 800 clamp(38px, 6vw, 60px)/1.06 var(--of-fonte-titulo);
  --of-h1: 800 clamp(32px, 4.6vw, 48px)/1.1 var(--of-fonte-titulo);
  --of-h2: 800 clamp(28px, 4.2vw, 40px)/1.12 var(--of-fonte-titulo);
  --of-h3: 700 20px/1.3 var(--of-fonte-titulo);
  --of-corpo-g: 400 18px/1.6 var(--of-fonte-corpo);
  --of-corpo: 400 16px/1.6 var(--of-fonte-corpo);
  --of-legenda: 400 14px/1.5 var(--of-fonte-corpo);
  --of-olho: 700 12px/1 var(--of-fonte-corpo);      /* caixa alta, letter-spacing .12em */
  --of-numero: 800 48px/1 var(--of-fonte-titulo);   /* font-variant-numeric: tabular-nums */
  --of-espaco-titulo: -0.03em;                      /* letter-spacing de display/h1/h2 */

  /* Espaço (base 4, passos de 8) */
  --of-e1: 4px; --of-e2: 8px; --of-e3: 12px; --of-e4: 16px; --of-e5: 24px;
  --of-e6: 32px; --of-e7: 48px; --of-e8: 64px; --of-e9: 96px;
  --of-secao: 96px;             /* padding vertical de seção (64px no celular) */
  --of-max: 1120px;             /* container */
  --of-max-texto: 720px;        /* bloco de leitura, FAQ */
  --of-gutter: 20px;            /* margem lateral (16px abaixo de 360px) */

  /* Raio */
  --of-raio-p: 8px;             /* chip pequeno, célula */
  --of-raio-m: 12px;            /* campo de formulário do app, item de lista */
  --of-raio: 16px;              /* card */
  --of-raio-g: 24px;            /* moldura de mockup, painel grande */
  --of-raio-pilula: 999px;      /* botão, selo, campo do hero */

  /* Sombra: quase nula */
  --of-sombra-botao: 0 4px 16px rgba(14, 90, 60, .22);
  --of-sombra-flutuante: 0 16px 32px rgba(15, 23, 42, .08);  /* só menu aberto e popover */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --of-verde: #7CCB98; --of-verde-hover: #9AD9B0; --of-verde-escuro: #0E2C1F; --of-sobre-verde: #08261A;
    --of-folha: #6CC655; --of-folha-texto: #6CC655; --of-selo: #173A28;
    --of-fundo: #0B1A13; --of-alt: #10241A; --of-papel: #132A1F;
    --of-tinta: #E8F2EC; --of-tinta-2: #B8C9BF; --of-tinta-3: #8FA397;
    --of-borda: #23392D; --of-borda-forte: #345243; --of-borda-campo: #6B8A7A; --of-foco: #7CCB98;
    --of-ok: #6CC655; --of-ok-suave: #173A28; --of-atencao: #F5B544; --of-atencao-suave: #3A2A0E; --of-erro: #F97066; --of-erro-suave: #3B1512;
    --ofi-tinta: #A7DDBC; --ofi-acento: #6CC655; --ofi-nevoa: #234634; --ofi-papel: #10241A;
  }
}
:root[data-tema="escuro"] {
  --of-verde: #7CCB98; --of-verde-hover: #9AD9B0; --of-verde-escuro: #0E2C1F; --of-sobre-verde: #08261A;
  --of-folha: #6CC655; --of-folha-texto: #6CC655; --of-selo: #173A28;
  --of-fundo: #0B1A13; --of-alt: #10241A; --of-papel: #132A1F;
  --of-tinta: #E8F2EC; --of-tinta-2: #B8C9BF; --of-tinta-3: #8FA397;
  --of-borda: #23392D; --of-borda-forte: #345243; --of-borda-campo: #6B8A7A; --of-foco: #7CCB98;
  --of-ok: #6CC655; --of-ok-suave: #173A28; --of-atencao: #F5B544; --of-atencao-suave: #3A2A0E; --of-erro: #F97066; --of-erro-suave: #3B1512;
  --ofi-tinta: #A7DDBC; --ofi-acento: #6CC655; --ofi-nevoa: #234634; --ofi-papel: #10241A;
}

@media (max-width: 700px) { :root, [data-tema="claro"] { --of-secao: 64px; } }