/* ============================================================
   Kotari — tokens de marca
   Fonte: KV/Gemini_Generated_Image_2212uc2212uc2212.png
   (proposta de identidade visual)

   Regra: nada de hex solto no CSS das peças. Sempre var(--k-*).
   Se faltar um token, crie aqui — não improvise no componente.
   ============================================================ */

:root {
  /* ---- Paleta bruta (valores da prancha de identidade) ---- */
  --k-navy:        #0A1B3F;  /* primário */
  --k-emerald:     #1A633B;  /* ação / símbolo */
  --k-mint:        #E0F2E9;  /* secundário claro */
  --k-saffron:     #F5C71A;  /* secundário de destaque */
  --k-cream:       #FDFBF6;  /* fundo da marca */

  /* Warm greys: a prancha mostra os dois swatches mas não declara hex.
     Valores abaixo são aproximação — [confirmar com o DS]. */
  --k-grey-warm:   #C9C2BA;
  --k-grey-deep:   #6B665F;

  /* Derivados (tonalidades de trabalho, não estão na prancha) */
  --k-navy-900:    #060F24;
  --k-navy-700:    #16305F;
  --k-emerald-700: #124A2C;
  --k-emerald-300: #3E8C5F;

  /* ---- Papéis semânticos: use ESTES nas peças ---- */
  --k-bg:            var(--k-cream);
  --k-bg-alt:        var(--k-mint);
  --k-bg-inverse:    var(--k-navy);

  --k-surface:       #FFFFFF;
  --k-border:        var(--k-grey-warm);

  --k-text:          var(--k-navy);
  --k-text-muted:    var(--k-grey-deep);
  --k-text-inverse:  var(--k-cream);

  --k-action:            var(--k-emerald);
  --k-action-text:       #FFFFFF;
  --k-highlight:         var(--k-saffron);  /* dado, número, gráfico. NÃO é cor de CTA */

  /* ---- Tipografia ----
     [confirmar] A Satoshi Variable veio do site de referência, não da marca.
     O wordmark do KV é uma grotesca geométrica de peso alto. Definir antes de fechar peça. */
  --k-font-display: "Satoshi", system-ui, sans-serif;
  --k-font-text:    "Satoshi", system-ui, sans-serif;
  --k-font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  --k-step--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  /* Escala (2026-09-16): o texto de apoio encolheu para o patamar das páginas /para-* — corpo fixo em 17px,
     lede/h3 de 18 a 22px (era até 28,8px), h1 até 56px (era 64). Os títulos de seção (step-2) ficaram. */
  --k-step-0:  1.0625rem;
  --k-step-1:  clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --k-step-2:  clamp(2.25rem, 1.95rem + 1.3vw, 2.75rem);
  --k-step-3:  clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem);

  /* ---- Espaçamento e forma ---- */
  --k-space-1: 0.5rem;
  --k-space-2: 1rem;
  --k-space-3: 1.5rem;
  --k-space-4: 2.5rem;
  --k-space-5: 4rem;
  --k-space-6: 6.5rem;

  --k-controle:  56px;   /* altura de botões grandes e campos */
  --k-radius:    12px;
  --k-radius-lg: 20px;

  --k-mov:  240ms;
  --k-mov-lento: 300ms;
  --k-ease: cubic-bezier(.2, .7, .3, 1);

  /* Estado de erro — usado pelo box de validação do formulário de contato. */
  --k-erro: #B42318;
}

/* ============================================================
   Direção visual (do KV — vale para qualquer peça)

   - Fundo padrão é o creme, não branco puro. O branco é superfície
     de card, não fundo de página.
   - Fotografia é de alimento fresco e real, em luz natural, sobre
     superfície clara. Nada de foto de escritório ou aperto de mão.
   - O monograma entra como marca d'água discreta / textura, nunca
     como elemento gritante.
   - Textura de papel kraft é o material de apoio da marca.
   - Saffron é acento pontual (número, gráfico, grifo). Se virar cor
     de botão, a marca perde o eixo navy+emerald.
   ============================================================ */

/* Escala tipográfica do celular: abaixo de 600px o piso de 36px dos títulos de seção não cabe em 342px de
   coluna (4–5 linhas); step-2 cai para ~29px. O h1 do hero (step-3) continua em 36px. */
@media (max-width: 600px) {
  :root {
    --k-step-2: clamp(1.75rem, 1.35rem + 2vw, 2.25rem);
    /* espaçamento do celular: a mesma escala, um degrau menor — seções 56px, cards 32px, blocos 20px */
    --k-space-3: 1.25rem;
    --k-space-4: 2rem;
    --k-space-5: 3.5rem;
    --k-space-6: 5rem;
    /* controles do celular: botões e campos em 48px (o CTA das /para-* tem 47), toque confortável sem parecer barra */
    --k-controle: 48px;
  }
}