/*
  Matéria-Prima Suplementos · MP Team
  Tokens do design system. Vale para as lojas de Taquara e Sapiranga.

  Origem: Instagram das duas lojas e material da franquia (Drive "Material - MP").
  - Amarelo MP #FDC401 medido nos posts e no logo oficial.
  - Preto de fundo nos posts e na fachada da loja.
  - Montserrat é a fonte dos textos dos posts; a letra pincelada aparece em
    títulos como "TELE-ENTREGA" e no nome da cidade no logo.

  Tema padrão: escuro (como as redes). Para tema claro, use data-tema="claro"
  no <html>. Sem atributo, segue o sistema do computador.
*/

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,800;1,900&family=Permanent+Marker&display=swap");

:root {
  /* Marca: fixas nos dois temas */
  --mp-amarelo: #fdc401;
  --mp-amarelo-forte: #e5b000;   /* hover do botão amarelo */
  --mp-amarelo-suave: #fff4c2;   /* fundo de destaque no tema claro */
  --mp-preto: #0b0b0b;
  --mp-branco: #ffffff;
  --mp-whatsapp: #25d366;

  /* Tipografia */
  --mp-fonte: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mp-fonte-pincel: "Permanent Marker", "Montserrat", cursive;

  --mp-texto-xs: 0.75rem;   /* 12 */
  --mp-texto-sm: 0.875rem;  /* 14 */
  --mp-texto-md: 1rem;      /* 16 */
  --mp-texto-lg: 1.125rem;  /* 18 */
  --mp-texto-xl: 1.375rem;  /* 22 */
  --mp-texto-2xl: 1.75rem;  /* 28 */
  --mp-texto-3xl: 2.25rem;  /* 36 */

  --mp-peso-normal: 400;
  --mp-peso-medio: 500;
  --mp-peso-forte: 700;
  --mp-peso-pesado: 800;
  --mp-peso-black: 900;

  /* Espaços (múltiplos de 4) */
  --mp-esp-1: 4px;
  --mp-esp-2: 8px;
  --mp-esp-3: 12px;
  --mp-esp-4: 16px;
  --mp-esp-5: 20px;
  --mp-esp-6: 24px;
  --mp-esp-8: 32px;
  --mp-esp-10: 40px;
  --mp-esp-12: 48px;

  /* Bordas: cantos firmes, a marca é robusta, não "fofinha" */
  --mp-raio-sm: 6px;
  --mp-raio-md: 10px;
  --mp-raio-lg: 14px;
  --mp-raio-pilula: 999px;

  --mp-transicao: 150ms ease;
  --mp-largura-conteudo: 760px;

  /* ---- Tema escuro (padrão) ---- */
  --mp-fundo: #0b0b0b;
  --mp-superficie: #161616;
  --mp-superficie-2: #1f1f1f;
  --mp-borda: #2e2e2e;
  --mp-borda-forte: #444444;
  --mp-texto: #f5f5f2;
  --mp-texto-suave: #a8a8a2;
  --mp-destaque: var(--mp-amarelo);        /* texto e ícones em destaque */
  --mp-destaque-fundo: rgba(253, 196, 1, 0.12);
  --mp-foco: var(--mp-amarelo);

  --mp-erro: #ff6b6b;
  --mp-erro-fundo: #3a1717;
  --mp-aviso: #ffa94d;
  --mp-aviso-fundo: #3a2510;
  --mp-ok: #51cf66;
  --mp-ok-fundo: #12301a;
  --mp-info: #74c0fc;
  --mp-info-fundo: #132a3a;

  --mp-sombra: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.35);

  color-scheme: dark;
}

/* ---- Tema claro ---- */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="escuro"]) {
    --mp-fundo: #f4f3ef;
    --mp-superficie: #ffffff;
    --mp-superficie-2: #f0efea;
    --mp-borda: #e0ded6;
    --mp-borda-forte: #c4c1b6;
    --mp-texto: #0b0b0b;
    --mp-texto-suave: #5f5e58;
    --mp-destaque: #8a6500;   /* amarelo escurecido: amarelo puro não se lê em fundo branco */
    --mp-destaque-fundo: var(--mp-amarelo-suave);
    --mp-foco: #0b0b0b;
    --mp-erro: #c92a2a;
    --mp-erro-fundo: #fdecec;
    --mp-aviso: #a34d00;
    --mp-aviso-fundo: #fff1e0;
    --mp-ok: #237a35;
    --mp-ok-fundo: #e6f6e9;
    --mp-info: #1864ab;
    --mp-info-fundo: #e7f1fb;
    --mp-sombra: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
    color-scheme: light;
  }
}
:root[data-tema="claro"] {
  --mp-fundo: #f4f3ef;
  --mp-superficie: #ffffff;
  --mp-superficie-2: #f0efea;
  --mp-borda: #e0ded6;
  --mp-borda-forte: #c4c1b6;
  --mp-texto: #0b0b0b;
  --mp-texto-suave: #5f5e58;
  --mp-destaque: #8a6500;
  --mp-destaque-fundo: var(--mp-amarelo-suave);
  --mp-foco: #0b0b0b;
  --mp-erro: #c92a2a;
  --mp-erro-fundo: #fdecec;
  --mp-aviso: #a34d00;
  --mp-aviso-fundo: #fff1e0;
  --mp-ok: #237a35;
  --mp-ok-fundo: #e6f6e9;
  --mp-info: #1864ab;
  --mp-info-fundo: #e7f1fb;
  --mp-sombra: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
  color-scheme: light;
}