/*
Theme Name: Modicas Premium
Theme URI: https://modicas.site
Author: Jeff Gualter
Description: Tema Premium otimizado para ofertas, SEO e performance.
Version: 3.1.0
*/

/* ============================================================
   TOKENS GLOBAIS
============================================================ */
:root {
  /* Cores base */
  --color-bg: #ffffff;
  --color-bg-soft: #f8f9fa;
  --color-border: #e4e6eb;
  --color-text: #111827;
  --color-text-light: #4b5563;

  --color-primary: #0d6efd;
  --color-primary-dark: #084298;

  --color-dark: #111827;
  --color-dark-soft: #1f2937;

  /* Tipografia */
  --font-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --line-base: 1.55;

  /* Larguras */
  --content-max: 760px;
  --content-wide: 1040px;   /* eixo global mais estreito */
  --max-w: var(--content-wide);

  /* Espaçamentos “oficiais” */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;
  --space-7: 36px;
  --space-8: 40px;
  --space-9: 52px;
  --space-10: 72px;
  --space-12: 96px;

  /* Sombras */
  --shadow-soft: 0 2px 8px rgba(15,23,42,0.06);
  --shadow-md: 0 4px 16px rgba(15,23,42,0.10);

  /* ===== ALIASES PARA OS CSS PREMIUM ===== */
  --max-w: var(--content-wide);
  --font-main: var(--font-base);

  --text-1: var(--color-text);
  --text-2: var(--color-text-light);

  --brand: var(--color-primary);
  --brand-dark: var(--color-primary-dark);
  --brand-light: #4f8dff;

  --sp-1: var(--space-1);
  --sp-2: var(--space-2);
  --sp-3: var(--space-3);
  --sp-4: var(--space-4);
  --sp-5: var(--space-5);
  --sp-6: var(--space-6);
  --sp-7: var(--space-7);
  --sp-8: var(--space-8);
  --sp-9: var(--space-9);
}

/* ============================================================
   RESET BÁSICO
============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-base);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: var(--line-base);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color .2s ease;
}

a:hover {
  color: var(--color-primary-dark);
}

button {
  font-family: var(--font-base);
  cursor: pointer;
}

/* Container utilitário genérico (mantém retrocompatibilidade) */
.container {
  width: 100%;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

h1, h2, h3, h4 {
  line-height: 1.25;
  margin: 0 0 12px;
}

p {
  margin: 0 0 var(--space-4);
}