/* ==========================================================================
   MR. HOULANG SUPERMERCADO — DESIGN TOKENS
   Paleta extraída da marca real (logótipo + página oficial de Facebook).
   Não alterar estes valores sem rever a identidade em toda a plataforma.
   ========================================================================== */

:root {
  /* ---- Cor de marca ---- */
  --hl-orange: #FAA121;        /* Laranja Houlang — cor principal */
  --hl-orange-dark: #C67023;   /* Laranja profundo — hover, sombras, selo dourado */
  --hl-orange-light: #FFD699;  /* Laranja claro — fundos suaves, badges */
  --hl-red: #E5002E;           /* Vermelho Houlang — promoções, urgência, desconto */
  --hl-red-dark: #B5001F;      /* Vermelho hover/pressed */

  /* ---- Neutros ---- */
  --hl-ink: #1A1A1A;           /* Texto principal */
  --hl-ink-soft: #4A4340;      /* Texto secundário */
  --hl-cream: #FFF8F0;         /* Fundo principal da página */
  --hl-cream-deep: #FCEFDC;    /* Fundo de secções alternadas */
  --hl-white: #FFFFFF;
  --hl-line: #EFE1CE;          /* Divisórias, bordas suaves */
  --hl-gray-500: #8A8580;

  /* ---- Estado / feedback ---- */
  --hl-success: #1E8E3E;
  --hl-success-bg: #E7F6EC;
  --hl-warning: #B5001F;
  --hl-info: #2563EB;

  /* ---- Tipografia ----
     Display: Baloo 2 — arredondada, robusta, com o mesmo carácter "cartaz de loja"
     que a marca já usa nos posts promocionais (números grandes, bold, confiante).
     Corpo: Inter — extremamente legível em ecrãs pequenos e ligações lentas,
     com números tabulares para preços. */
  --font-display: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --fs-xs: 0.75rem;     /* 12px — legendas, termos */
  --fs-sm: 0.875rem;    /* 14px — texto secundário */
  --fs-base: 1rem;      /* 16px — corpo */
  --fs-md: 1.125rem;    /* 18px */
  --fs-lg: 1.375rem;    /* 22px — subtítulos */
  --fs-xl: 1.75rem;     /* 28px — título de secção */
  --fs-2xl: 2.25rem;    /* 36px — título hero mobile */
  --fs-3xl: 3rem;       /* 48px — título hero desktop */

  /* ---- Espaçamento (escala 4px) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* ---- Raio / sombra ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-card: 0 2px 10px rgba(26, 20, 10, 0.08);
  --shadow-float: 0 8px 24px rgba(26, 20, 10, 0.16);

  /* ---- Layout ---- */
  --container-max: 1280px;
  --header-h: 64px;
  --touch-min: 44px; /* alvo mínimo de toque, acessibilidade mobile */

  /* ---- Camadas ---- */
  --z-header: 100;
  --z-cart-bar: 90;
  --z-modal: 200;
  --z-toast: 300;
}