/* ══════════════════════════════════════════════════════════════════════
   EKOA NATURAL — tokens de identidade visual  ·  v1
   Fonte única de cor, tipo e espaço. Qualquer superfície da marca
   (site, painel, e-mail, arte de Instagram) puxa daqui.
   As cores saíram do símbolo: o musgo é o fundo dele, o broto é o traço.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Cor: base ─────────────────────────────────────────────────────── */
  --ekoa-musgo:    #4F5D28;  /* verde do fundo do símbolo. Cor institucional. */
  --ekoa-broto:    #D8DC77;  /* verde-limão do traço. Assinatura da marca.   */
  --ekoa-casca:    #2A2718;  /* quase-preto com viés oliva. Todo texto.      */
  --ekoa-leite:    #F3F4EC;  /* off-white esverdeado. Fundo de página.       */
  --ekoa-salvia:   #7B806A;  /* cinza-sálvia. Texto secundário e bordas.     */
  --ekoa-urucum:   #B8492A;  /* único acento quente. Promoção, erro, urgência.*/

  /* ── Cor: derivadas ────────────────────────────────────────────────── */
  --ekoa-musgo-escuro: #3B4620;
  --ekoa-broto-fraco:  #EDEFC4;  /* fundo de selo/badge sobre o leite */
  --ekoa-linha:        #DCDDD0;  /* borda de 1px sobre o leite */
  --ekoa-superficie:   #FAFBF5;  /* card sobre o leite */

  /* ── Papéis semânticos (é isto que o componente usa) ───────────────── */
  --cor-fundo:        var(--ekoa-leite);
  --cor-superficie:   var(--ekoa-superficie);
  --cor-texto:        var(--ekoa-casca);
  --cor-texto-fraco:  var(--ekoa-salvia);
  --cor-borda:        var(--ekoa-linha);
  --cor-marca:        var(--ekoa-musgo);
  --cor-acao:         var(--ekoa-broto);      /* fundo do botão principal */
  --cor-acao-texto:   var(--ekoa-casca);      /* texto do botão principal */
  --cor-alerta:       var(--ekoa-urucum);
  --cor-ok:           #2F7D46;

  /* ── Tipografia ────────────────────────────────────────────────────── */
  /* Produção: carregue Fraunces e Figtree do Google Fonts. */
  --fonte-titulo: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --fonte-texto:  'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --texto-xs:  0.8125rem;  /* 13px — legenda, aviso legal */
  --texto-sm:  0.9375rem;  /* 15px — apoio */
  --texto-md:  1.0625rem;  /* 17px — corpo padrão */
  --texto-lg:  1.3125rem;  /* 21px — destaque, preço */
  --texto-xl:  1.6875rem;  /* 27px — título de card */
  --texto-2xl: 2.25rem;    /* 36px — título de seção */
  --texto-3xl: 3.25rem;    /* 52px — título de página */
  --texto-4xl: 4.75rem;    /* 76px — hero */

  --entrelinha-titulo: 1.06;
  --entrelinha-texto:  1.62;
  --caixa-alta: 0.14em;   /* letter-spacing de rótulo em caixa alta */

  /* ── Espaço (escala de 4) ──────────────────────────────────────────── */
  --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-6: 24px;  --e-8: 32px;  --e-12: 48px; --e-16: 64px;
  --e-24: 96px; --e-32: 128px;

  /* ── Forma ─────────────────────────────────────────────────────────── */
  /* O símbolo não tem canto reto nem círculo perfeito: tem curva desigual.
     O raio orgânico é o que traduz isso para a interface. Use nos selos e
     em molduras decorativas — não em campo de formulário. */
  --raio-organico: 62% 38% 46% 54% / 48% 56% 44% 52%;
  --raio-pilula: 999px;
  --raio-card: 14px;
  --raio-campo: 8px;

  --sombra-card: 0 1px 2px rgba(42,39,24,.05), 0 8px 24px -12px rgba(42,39,24,.14);

  --largura-conteudo: 1180px;
  --largura-leitura: 68ch;

  --transicao: 220ms cubic-bezier(.2,.7,.3,1);
}

/* ── Modo escuro ──────────────────────────────────────────────────────
   O broto sobre o casca dá 10:1 de contraste — é a combinação mais forte
   da marca. O modo escuro existe por causa dela, não por moda.          */
@media (prefers-color-scheme: dark) {
  :root {
    --cor-fundo:       #14130C;
    --cor-superficie:  #1E1C12;
    --cor-texto:       #E9EADC;
    --cor-texto-fraco: #8B9077;
    --cor-borda:       #302D1E;
    --cor-marca:       var(--ekoa-broto);
    --cor-acao:        var(--ekoa-broto);
    --cor-acao-texto:  var(--ekoa-casca);
    --cor-alerta:      #E0714E;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   REGRAS DE USO — não são sugestão, são o que mantém a marca reconhecível
   ══════════════════════════════════════════════════════════════════════

   1. O broto (#D8DC77) nunca carrega parágrafo. Sobre o musgo ele dá
      4,86:1 — passa no mínimo de acessibilidade e para de passar em
      texto pequeno. Ele é assinatura: botão, selo, título, símbolo.

   2. Botão principal = fundo broto + texto casca. Sempre. É a combinação
      de maior contraste da marca (10,2:1) e a única que o cliente precisa
      aprender a reconhecer.

   3. O urucum é só um: promoção, erro, prazo acabando. Se aparecer em
      dois lugares na mesma tela, um dos dois não era urgente.

   4. Fundo de página é leite ou casca. Musgo é faixa, rodapé, card de
      destaque — nunca a página inteira. Foto de produto sobre musgo
      cheio some.

   5. Foto de produto vai sobre leite ou superfície. Fundo neutro, luz
      natural, sombra macia. Sem gradiente, sem fundo colorido.
   ══════════════════════════════════════════════════════════════════════ */