@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
/* Comercial Santana — Color tokens
   Brand: o vermelho do letreiro, o amarelo da logo, o grafite do texto
   e os tons de areia/creme da fachada. Verde só para o WhatsApp. */

:root {
  /* ---- Brand: Vermelho (letreiro / CTA principal) ---- */
  --cs-red-700: #7E0D14;
  --cs-red-600: #A1121A;
  --cs-red-500: #C5242B; /* primary */
  --cs-red-400: #D9343B;

  /* ---- Brand: Amarelo (fundo da logo / destaques) ---- */
  --cs-yellow-600: #E2A815;
  --cs-yellow-500: #F6C12E; /* accent */
  --cs-yellow-300: #FAD86A;

  /* ---- Grafite / texto ---- */
  --cs-ink-900: #16130F;
  --cs-ink-700: #3A332B;
  --cs-ink-500: #6F655A;
  --cs-ink-300: #9A9186;

  /* ---- Areia / creme (fundos e superfícies) ---- */
  --cs-sand-50: #FCFAF6;
  --cs-sand-100: #FAF6EF;
  --cs-sand-200: #F2ECE3;
  --cs-sand-300: #ECE4D8;
  --cs-line: #ECE3D5;
  --cs-line-soft: #F1EBE2;
  --cs-white: #FFFFFF;

  /* ---- Utilitário: WhatsApp ---- */
  --cs-wa-green: #25D366;
  --cs-wa-green-dark: #16A64C;

  /* ---- Status ---- */
  --cs-open: #2EE07F;
  --cs-closed: #FF6A5C;

  /* ===== Semantic aliases ===== */
  --color-primary: var(--cs-red-500);
  --color-primary-strong: var(--cs-red-600);
  --color-accent: var(--cs-yellow-500);
  --color-accent-strong: var(--cs-yellow-600);
  --on-primary: #FFFFFF;
  --on-accent: var(--cs-ink-900);

  --text-strong: var(--cs-ink-900);
  --text-body: var(--cs-ink-700);
  --text-muted: var(--cs-ink-500);
  --text-faint: var(--cs-ink-300);

  --surface-page: var(--cs-sand-300);
  --surface-card: var(--cs-white);
  --surface-soft: var(--cs-sand-100);
  --surface-footer: var(--cs-sand-50);

  --border-subtle: var(--cs-line);
  --border-faint: var(--cs-line-soft);
}
/* Comercial Santana — Typography tokens
   Display: Archivo (peso forte, industrial, lembra letreiro de loja).
   Texto: Plus Jakarta Sans (humanista, legível em telinha de celular). */

:root {
  --font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Escala (mobile-first, base de link-in-bio) */
  --fs-display: 28px;  /* nome da loja */
  --fs-h1: 22px;
  --fs-h2: 17px;       /* títulos de CTA */
  --fs-title: 16px;
  --fs-body: 14px;
  --fs-small: 12.5px;
  --fs-eyebrow: 11.5px; /* rótulos em caixa-alta */

  /* Pesos */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800; /* títulos display */
  --fw-black: 900;

  /* Tracking */
  --tracking-eyebrow: 1.8px;
  --tracking-tight: -0.5px;
  --tracking-tighter: -0.6px;

  /* Line-height */
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.4;
}
/* Comercial Santana — Spacing, radii & layout tokens */

:root {
  /* Espaçamento (base 4) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;

  /* Raios — generosos e arredondados, mas nunca pílula nos cards */
  --radius-sm: 10px;
  --radius-md: 14px;   /* tiles de categoria */
  --radius-lg: 19px;   /* botões de ação */
  --radius-xl: 25px;   /* badge da logo */
  --radius-pill: 999px; /* status / chips */

  /* Layout */
  --container-max: 462px; /* coluna mobile do link-in-bio */
  --gutter: 22px;
}
/* Comercial Santana — Shadows, gradients & motion tokens */

:root {
  /* Sombras — quentes (base marrom/areia), nunca cinza-azulado */
  --shadow-sm: 0 4px 14px rgba(40, 25, 10, 0.10);
  --shadow-md: 0 12px 26px rgba(60, 30, 10, 0.16);
  --shadow-lg: 0 14px 32px rgba(60, 30, 10, 0.20);
  --shadow-cta-green: 0 12px 26px rgba(22, 166, 76, 0.30);
  --shadow-cta-red: 0 12px 26px rgba(166, 18, 26, 0.28);
  --shadow-badge: 0 14px 32px rgba(120, 80, 10, 0.26);

  /* Gradientes de marca */
  --gradient-green: linear-gradient(135deg, #25D366 0%, #16A64C 100%);
  --gradient-red: linear-gradient(135deg, #D32630 0%, #A1121A 100%);

  /* Lavagem vermelha do hero (sobre a foto da fachada) */
  --hero-red-wash: linear-gradient(180deg, rgba(176, 20, 28, 0.46) 0%, rgba(176, 20, 28, 0.16) 34%, rgba(20, 12, 4, 0.04) 56%, rgba(20, 12, 4, 0.60) 100%);
  --hero-bottom-fade: linear-gradient(180deg, rgba(20, 12, 4, 0.10) 0%, rgba(20, 12, 4, 0) 30%, rgba(20, 12, 4, 0) 60%, rgba(20, 12, 4, 0.42) 100%);
  --tile-fade: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.74) 100%);

  /* Movimento — discreto, sem bounce */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur-normal: 200ms;
}