/* ============================================================
   TOOGO / YOUR STORE — DESIGN TOKENS
   Etapa 1 | Fonte única da identidade visual e medidas globais.
   ============================================================ */

:root {
  /* Identidade de marca — valores aprovados no briefing */
  --verde-lima: #B2CB3E;
  --verde-medio: #8AB43F;
  --verde-folha: #5E9442;
  --gradiente-marca: linear-gradient(90deg, #5E9442, #B2CB3E);
  --grafite: #4A4A4A;
  --tinta: #141614;
  --texto-suave: #5C605A;
  --linha: #E4E6DF;
  --off-white: #FAFAF7;
  --areia: #F1F2EC;

  /* Cores semânticas */
  --cor-fundo: var(--off-white);
  --cor-superficie: #FFFFFF;
  --cor-superficie-alt: var(--areia);
  --cor-texto: var(--tinta);
  --cor-texto-secundario: var(--texto-suave);
  --cor-acento: var(--verde-lima);
  /* Verde da marca é 3,47:1 no off-white; escurecer em textos pequenos para WCAG AA. */
  --verde-texto-acessivel: #4B7932;
  --cor-link: var(--verde-texto-acessivel);
  --cor-borda: var(--linha);
  --cor-foco: #3D6D2E; /* AA para elementos focados no off-white. */
  --cor-relevo: #E8EBE3;
  --cor-metadata: #626960;
  --cor-escura: var(--tinta);
  --cor-texto-sobre-escuro: #F7F8F3;
  --cor-texto-suave-sobre-escuro: #BEC3B9;
  --cor-linha-sobre-escuro: rgba(250, 250, 247, 0.16);

  /* Tipografia */
  --fonte-titulo: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-corpo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1rem;
  --fs-lg: clamp(1.0625rem, 1.4vw, 1.25rem);
  --fs-h3: clamp(1.375rem, 2.2vw, 1.875rem);
  --fs-h2: clamp(2rem, 3.8vw, 3.5rem);
  --fs-hero: clamp(2.6rem, 5.2vw, 5rem);
  --lh-corpo: 1.65;
  --lh-titulo: 1.1;
  --lh-hero: 1.02;
  --tracking-titulo: -0.03em;
  --tracking-eyebrow: 0.18em;

  /* Escala modular: base 4 px */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-6: 24px;
  --esp-8: 32px;
  --esp-12: 48px;
  --esp-16: 64px;
  --esp-24: 96px;
  --esp-32: 128px;

  /* Layout */
  --largura-container: 1320px;
  --padding-container: clamp(16px, 4vw, 40px);
  --padding-secao: clamp(64px, 9vw, 136px);
  --altura-header: 84px;
  --altura-barra-mobile: 76px;

  /* Raios */
  --raio-pequeno: 8px;
  --raio-card: 16px;
  --raio-bloco: 24px;
  --raio-pilula: 999px;

  /* Bordas e sombras: sempre contidas */
  --borda-padrao: 1px solid var(--linha);
  --sombra-sutil: 0 1px 2px rgba(20, 22, 20, 0.04);
  --sombra-card: 0 1px 2px rgba(20, 22, 20, 0.04),
    0 8px 24px rgba(20, 22, 20, 0.06);
  --sombra-flutuante: 0 8px 40px rgba(20, 22, 20, 0.09);

  /* Tempo e easing */
  --tempo-hover: 180ms;
  --tempo-ui: 320ms;
  --tempo-entrada: 600ms;
  --ease-suave: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Ordem de empilhamento */
  --z-header: 40;
  --z-busca: 41;
  --z-barra-mobile: 50;
  --z-overlay: 80;
  --z-drawer: 90;
  --z-toast: 110;
}

@media (max-width: 1099px) {
  :root {
    --altura-header: 76px;
  }
}

@media (max-width: 767px) {
  :root {
    --altura-header: 68px;
    --fs-base: 0.9375rem; /* 15px no mobile melhora a leitura */
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tempo-hover: 0.01ms;
    --tempo-ui: 0.01ms;
    --tempo-entrada: 0.01ms;
  }
}