/* ==========================================================================
   WMC Distribuidora — Design tokens
   Regra da casa: cor sólida, zero gradiente. Um único accent (âmbar).
   O dourado é neutro quente de apoio — borda e tipografia —, nunca botão.
   ========================================================================== */

:root {
  /* --- Superfícies (escala de preto, sólida) ------------------------------ */
  --ink-900: #050505;   /* fundo absoluto da página */
  --ink-850: #0a0a0b;   /* seção alternada */
  --ink-800: #101011;   /* card / superfície */
  --ink-700: #17171a;   /* superfície elevada, hover */
  --ink-600: #202024;   /* superfície de input */
  --line:    #26262a;   /* borda padrão */
  --line-strong: #3a3a40;

  /* --- Accent único ------------------------------------------------------- */
  --amber:      #f7871f;
  --amber-hi:   #ff9e3d;  /* hover */
  --amber-lo:   #c76507;  /* pressed */
  --amber-06:   rgba(247, 135, 31, 0.06);
  --amber-12:   rgba(247, 135, 31, 0.12);
  --amber-24:   rgba(247, 135, 31, 0.24);
  --amber-40:   rgba(247, 135, 31, 0.40);

  /* --- Neutro quente de apoio (nunca interativo) -------------------------- */
  --gold:    #e9b872;
  --gold-24: rgba(233, 184, 114, 0.24);

  /* --- Texto ---------------------------------------------------------------
     Os quatro tons foram calibrados para passar em AA (4.5:1) tanto sobre o
     fundo (--ink-900) quanto sobre o card (--ink-800). O tom mais apagado
     ainda carrega informação — volume, teor, embalagem —, então ele não pode
     ser só decorativo: precisa ser legível de verdade. */
  --cream:  #fbefdd;   /* headline          — 16.8:1 no card */
  --text:   #e4ded4;   /* corpo             — 15.2:1 no fundo */
  --muted:  #9b9488;   /* secundário        —  6.8:1 no fundo */
  --faint:  #847d72;   /* legenda, meta     —  5.0:1 no fundo, 4.7:1 no card */

  /* --- Tipografia --------------------------------------------------------- */
  --font-display: 'Archivo', 'Arial Black', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala fluida — mesma razão (1.25) do mobile ao desktop */
  --fs-eyebrow: 0.6875rem;                          /* 11px, tracking largo */
  --fs-xs:   0.75rem;                               /* 12 */
  --fs-sm:   0.8125rem;                             /* 13 */
  --fs-base: 0.9375rem;                             /* 15 */
  --fs-md:   clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-lg:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-xl:   clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
  --fs-2xl:  clamp(2.1rem, 1.6rem + 2.4vw, 3.5rem);
  --fs-3xl:  clamp(2.8rem, 1.7rem + 5.2vw, 6rem);
  --fs-hero: clamp(3.2rem, 1.2rem + 9vw, 11rem);

  --lh-tight: 0.92;
  --lh-snug:  1.15;
  --lh-body:  1.62;

  --tr-hero:    -0.045em;   /* tracking negativo em display grande */
  --tr-display: -0.02em;
  --tr-eyebrow: 0.28em;     /* caixa alta espaçada, igual ao logo */
  --tr-label:   0.14em;

  /* --- Espaçamento (escala de 4) ------------------------------------------ */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  --section-y: clamp(72px, 9vw, 160px);
  --gutter:    clamp(20px, 4.5vw, 72px);
  --container: 1440px;
  --container-wide: 1720px;
  --measure:   62ch;

  /* --- Forma -------------------------------------------------------------- */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* --- Movimento ---------------------------------------------------------- */
  /* Uma única família de easing no site inteiro: power3. */
  --ease:       cubic-bezier(0.215, 0.610, 0.355, 1.000);  /* power3.out   */
  --ease-inout: cubic-bezier(0.645, 0.045, 0.355, 1.000);  /* power3.inOut */

  /* Velocidade escala com o tamanho do elemento. */
  --d-micro: 240ms;   /* botão, ícone, hover  */
  --d-meso:  600ms;   /* card, bloco, reveal  */
  --d-macro: 1100ms;  /* tela cheia, cortina  */

  /* --- Camadas ------------------------------------------------------------ */
  --z-base: 1;
  --z-sticky: 50;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-boot: 500;

  /* --- Foco (acessibilidade) ---------------------------------------------- */
  --focus-ring: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--amber);
}

/* O catálogo é dark-only por decisão de marca: o logo vive sobre preto.
   Declarado para o navegador pintar os controles nativos corretamente. */
:root { color-scheme: dark; }