/* ==========================================================================
   OKSEG · Design Tokens
   Fonte da verdade: specs/design.md § 3, § 4, § 5
   ⚠️ PROIBIDO hardcodar hex de cor fora deste arquivo.
   ========================================================================== */

/* --- Fontes auto-hospedadas (variáveis, subset latin) --------------------- */

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-var.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Marca ------------------------------------------------------------ */
  /* Extraídos do logotipo oficial em "imagens - site/LOGO GRUPO OKSEG.png". */
  --okseg-laranja:        #E75B0E;  /* cor da marca — ícones, bordas, títulos grandes */
  --okseg-laranja-forte:  #C24A08;  /* fundo com texto branco e texto pequeno (AA)    */
  --okseg-laranja-hover:  #A03B05;  /* hover dos elementos acima                      */
  --okseg-laranja-claro:  #F07A2A;  /* texto e rótulos pequenos sobre fundo escuro    */
  --okseg-laranja-suave:  #FDF1E8;  /* fundo sutil                                    */

  /* --- Neutros ---------------------------------------------------------- */
  --grafite:          #454544;      /* grafite oficial do logotipo */
  --grafite-dark:     #2E2E2D;
  --preto:            #111111;
  --branco:           #FFFFFF;
  --cinza-claro:      #F5F5F5;
  --cinza-card:       #ECECEC;
  --cinza-borda:      #E0E0E0;
  --cinza-texto:      #6B6B6B;

  /* --- Utilitário ------------------------------------------------------- */
  --whatsapp:         #25D366;
  --overlay-foto:     rgba(0, 0, 0, .55);

  /* --- Tipografia ------------------------------------------------------- */
  --font-titulo: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-corpo:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-hero:   clamp(2.25rem, 5.2vw, 4rem);
  --fs-h1:     clamp(2rem, 4.5vw, 3.25rem);
  --fs-h2:     clamp(1.6rem, 3.2vw, 2.5rem);
  --fs-h3:     clamp(1.2rem, 2vw, 1.5rem);
  --fs-body:   1rem;
  --fs-small:  .875rem;
  --fs-label:  .75rem;

  /* --- Layout ----------------------------------------------------------- */
  --container: 1200px;
  --gutter: 20px;          /* mobile: mais área útil na tela pequena */
  --header-h: 80px;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;

  --shadow-card:  0 2px 12px rgba(0, 0, 0, .06);
  --shadow-hover: 0 8px 28px rgba(0, 0, 0, .12);
  --shadow-header: 0 2px 16px rgba(0, 0, 0, .08);

  --transicao: .2s ease;
  /* easing suave para micro-interações (entrada rápida, saída lenta) */
  --ease-suave: cubic-bezier(.2, .7, .2, 1);
  --transicao-suave: .3s var(--ease-suave);

  /* Corte diagonal do card de solução (assinatura visual) */
  --corte-card: 28px;
}

/* Respiro maior a partir do tablet — breakpoint de specs/design.md § 5 */
@media (min-width: 768px) {
  :root { --gutter: 24px; }
}