/* ============================================================
   Megamix Supermercados — Tokens de design
   Fonte de verdade: specs/design.md §2 a §5
   Valores oficiais do manual de marca (págs. 22-24).
   NENHUMA cor nova pode ser criada. Hover usa o degrau
   adjacente da própria família.
   ============================================================ */

:root {
  /* ---- Azul — família "gelo" (cor primária) — design.md §2.1 ---- */
  --brand-900: #0F3054;
  --brand-700: #1F63BF;
  --brand-300: #9CBDE8;

  /* ---- Vermelho — família "churras" (ação) — design.md §2.2 ---- */
  --accent-800: #571712;
  --accent-600: #B53838;
  --accent-300: #D97A78;

  /* ---- Apoio (manual pág. 24) — design.md §2.3 ---- */
  --ink-900: #29241F;   /* grafite   */
  --ink-500: #787370;   /* concreto  */
  --bg-soft: #F2EDE5;   /* leite     */
  --surface: #FFFFFF;   /* chantilly */

  /* ---- Derivados — design.md §2.4 (únicos não literais) ---- */
  --line: color-mix(in srgb, var(--ink-500) 24%, transparent);
  --focus: var(--ink-900);          /* sobre fundo claro  */
  --focus-sobre-cor: #FFFFFF;       /* sobre bloco de cor */

  /* ---- Tipografia — design.md §3 ---- */
  --font-display: "Retail", "Halyard Text", system-ui, sans-serif;
  --font-body: "Halyard Text", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala fluida entre 360px e 1280px — design.md §3.3 */
  --fs-display: clamp(1.5rem, 0.9rem + 2.6vw, 2.625rem);  /* 24 -> 42 — aprovado no teste visual (opção B) em 2026-09-03 */
  --fs-h1:      clamp(1.875rem, 1.30rem + 2.55vw, 2.875rem); /* 30 -> 46 */
  --fs-h2:      clamp(1.5625rem, 1.19rem + 1.66vw, 2.25rem); /* 25 -> 36 */
  --fs-h3:      clamp(1.3125rem, 1.14rem + 0.76vw, 1.6875rem);/* 21 -> 27 */
  --fs-h4:      clamp(1.125rem, 1.05rem + 0.34vw, 1.3125rem);/* 18 -> 21 */
  --fs-lead:    clamp(1.0625rem, 1.01rem + 0.23vw, 1.1875rem);/* 17 -> 19 */
  --fs-body: 1rem;      /* 16 — nunca abaixo disso */
  --fs-small: 0.875rem; /* 14 */
  --fs-label: clamp(0.75rem, 0.73rem + 0.11vw, 0.8125rem); /* 12 -> 13 */

  --lh-display: 1.05;
  --lh-h1: 1.12;
  --lh-h2: 1.18;
  --lh-h3: 1.28;
  --lh-h4: 1.35;
  --lh-lead: 1.65;
  --lh-body: 1.7;
  --lh-small: 1.55;

  /* ---- Espaçamento — base 4px — design.md §4 ---- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-6: 1.5rem;   --sp-8: 2rem;     --sp-10: 2.5rem;  --sp-12: 3rem;
  --sp-16: 4rem;    --sp-20: 5rem;    --sp-24: 6rem;    --sp-32: 8rem;

  --secao-y: var(--sp-16);        /* 64px mobile  */
  --margem-lateral: 1.25rem;      /* 20px mobile  */
  --container: 80rem;             /* 1280px       */
  --container-texto: 45rem;       /* 720px        */
  --gap-cards: var(--sp-4);       /* 16px mobile  */
  --card-padding: var(--sp-5, 1.25rem);

  /* ---- Bordas e raios — design.md §5 ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgb(41 36 31 / 0.06);
  --shadow-lg: 0 12px 32px rgb(41 36 31 / 0.12);

  /* ---- Movimento — design.md §9 ---- */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --t-rapida: 150ms;
  --t-padrao: 180ms;
  --t-acordeao: 200ms;
  --t-menu: 240ms;
  --t-entrada: 320ms;

  --header-altura: 4rem; /* 64px mobile */
}

@media (min-width: 768px) {
  :root {
    --margem-lateral: 2rem;   /* 32px tablet */
    --header-altura: 4.5rem;  /* 72px        */
    --gap-cards: var(--sp-6);
  }
}

@media (min-width: 1024px) {
  :root {
    --secao-y: 7rem;          /* 112px desktop */
    --margem-lateral: 2.5rem; /* 40px          */
    --header-altura: 5rem;    /* 80px          */
    --card-padding: 1.75rem;  /* 28px          */
  }
}