/* =========================================================
   EmpreenVivendo — Design Tokens
   ========================================================= */

:root {
  /* —— Neutros (brancos / pretos com leve calor) —— */
  --ev-paper:       oklch(0.985 0.005 85);   /* fundo principal */
  --ev-paper-2:     oklch(0.97  0.006 85);   /* cards / faixas alternadas */
  --ev-paper-3:     oklch(0.94  0.007 85);   /* hover suave / divisórias */
  --ev-rule:        oklch(0.88  0.006 80);   /* linhas finas */
  --ev-rule-soft:   oklch(0.93  0.005 80);
  --ev-ink-900:     oklch(0.18  0.012 60);   /* texto principal */
  --ev-ink-700:     oklch(0.32  0.010 60);
  --ev-ink-500:     oklch(0.50  0.010 60);   /* labels, metadados */
  --ev-ink-400:     oklch(0.62  0.008 70);
  --ev-ink-300:     oklch(0.78  0.005 80);

  /* —— Acentos (3 opções — Tijolo é o default) —— */
  --ev-tijolo:      oklch(0.62  0.16  45);   /* laranja-tijolo, fachada */
  --ev-tijolo-700:  oklch(0.50  0.15  42);
  --ev-tijolo-100:  oklch(0.94  0.04  55);

  --ev-mercado:     oklch(0.56  0.20  28);   /* vermelho-banca-de-fruta */
  --ev-mercado-700: oklch(0.44  0.18  26);
  --ev-mercado-100: oklch(0.94  0.05  25);

  --ev-tatico:      oklch(0.80  0.17  85);   /* amarelo de tapume */
  --ev-tatico-700:  oklch(0.66  0.14  80);
  --ev-tatico-100:  oklch(0.96  0.06  92);

  /* default acento — Tijolo */
  --ev-accent:      var(--ev-tijolo);
  --ev-accent-700:  var(--ev-tijolo-700);
  --ev-accent-100:  var(--ev-tijolo-100);

  /* —— Cores por região (tags) —— */
  --ev-r-baixada:   oklch(0.62  0.16  45);   /* tijolo */
  --ev-r-abc:       oklch(0.34  0.020 250);  /* grafite-asfalto */
  --ev-r-vale:      oklch(0.45  0.10  155);  /* verde-mata */
  --ev-r-hugo:      oklch(0.75  0.13  85);   /* dourado-fita */

  /* —— Semântica —— */
  --ev-success:     oklch(0.62  0.15  150);
  --ev-warning:     oklch(0.78  0.17  85);
  --ev-danger:      oklch(0.56  0.20  28);
  --ev-info:        oklch(0.55  0.10  235);
  --ev-live:        oklch(0.58  0.22  20);   /* "ao vivo" */

  /* —— Tipografia —— */
  --ev-serif:  "Newsreader", "Source Serif Pro", Georgia, serif;
  --ev-sans:   "Geist", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --ev-mono:   "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Escala (mobile-first; tudo cresce um pouco no desktop via @media) */
  --ev-step--1:  0.8125rem;   /* 13px — caption/meta */
  --ev-step-0:   0.9375rem;   /* 15px — body */
  --ev-step-1:   1.0625rem;   /* 17px — body large */
  --ev-step-2:   1.25rem;     /* 20px — h6 / dek pequeno */
  --ev-step-3:   1.5rem;      /* 24px — h5 */
  --ev-step-4:   1.875rem;    /* 30px — h4 */
  --ev-step-5:   2.375rem;    /* 38px — h3 */
  --ev-step-6:   3rem;        /* 48px — h2 */
  --ev-step-7:   3.75rem;     /* 60px — h1 hero */

  /* —— Espaçamento (base 4px) —— */
  --ev-sp-1: 4px;
  --ev-sp-2: 8px;
  --ev-sp-3: 12px;
  --ev-sp-4: 16px;
  --ev-sp-5: 20px;
  --ev-sp-6: 24px;
  --ev-sp-8: 32px;
  --ev-sp-10: 40px;
  --ev-sp-12: 48px;
  --ev-sp-16: 64px;
  --ev-sp-20: 80px;
  --ev-sp-24: 96px;

  /* —— Raios —— */
  --ev-rad-1: 4px;
  --ev-rad-2: 8px;
  --ev-rad-3: 12px;
  --ev-rad-4: 16px;
  --ev-rad-pill: 999px;

  /* —— Shadows (sutis, papel) —— */
  --ev-shadow-1: 0 1px 0 oklch(0.18 0.012 60 / 0.04);
  --ev-shadow-2: 0 4px 16px -8px oklch(0.18 0.012 60 / 0.12),
                 0 1px 2px      oklch(0.18 0.012 60 / 0.04);
  --ev-shadow-3: 0 16px 40px -16px oklch(0.18 0.012 60 / 0.20),
                 0 2px 6px       oklch(0.18 0.012 60 / 0.06);

  /* —— Motion —— */
  --ev-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ev-ease-snap:   cubic-bezier(0.34, 1.34, 0.5, 1);
  --ev-dur-1:       120ms;
  --ev-dur-2:       200ms;
  --ev-dur-3:       320ms;

  /* —— Grid —— */
  --ev-container:  min(1240px, 100% - 32px);
  --ev-gutter:     16px;
}

@media (min-width: 720px) {
  :root {
    --ev-step-5: 2.75rem;   /* 44px */
    --ev-step-6: 3.5rem;    /* 56px */
    --ev-step-7: 4.5rem;    /* 72px */
    --ev-gutter: 24px;
  }
}

/* —— Reset mínimo —— */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ev-sans);
  font-size: var(--ev-step-0);
  line-height: 1.55;
  color: var(--ev-ink-900);
  background: var(--ev-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ev-accent); color: var(--ev-paper); }

/* —— Utility primitives used by docs page only —— */
.ev-container { width: var(--ev-container); margin-inline: auto; }
.ev-mono { font-family: var(--ev-mono); }
.ev-serif { font-family: var(--ev-serif); }

/* —— Responsive component primitives —— */
/* Hero card: stacks under 720px container width, side-by-side above. */
.ev-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}
@container ev (min-width: 720px) {
  .ev-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; }
}
.ev-hero-headline {
  font-family: var(--ev-serif);
  font-size: clamp(28px, 5.4vw, 56px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 16px 0 14px;
  color: var(--ev-ink-900);
  text-wrap: balance;
  hyphens: auto;
  overflow-wrap: anywhere;
}
.ev-hero-dek {
  font-family: var(--ev-sans);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.5;
  color: var(--ev-ink-700);
  margin: 0 0 22px;
  text-wrap: pretty;
}
.ev-news-headline {
  text-wrap: balance;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Newsletter CTA: stacks under 640px. */
.ev-newsletter {
  background: var(--ev-ink-900);
  color: var(--ev-paper);
  padding: 40px clamp(20px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}
@container ev (min-width: 640px) {
  .ev-newsletter { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; }
}
.ev-newsletter h3 {
  font-family: var(--ev-serif);
  font-size: clamp(22px, 3.2vw, 36px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 10px 0 8px;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/* Containment context — any wrapper marked .ev-cq becomes the container. */
.ev-cq { container-type: inline-size; container-name: ev; }

/* Footer responsive */
.ev-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--ev-rule);
}
@container ev (min-width: 720px) {
  .ev-footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); }
}

/* Header responsive */
.ev-header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
@container ev (min-width: 720px) {
  .ev-header-inner { gap: 28px; flex-wrap: nowrap; }
}

/* —— Accent variants (swap by setting data-accent on root) —— */
[data-accent="mercado"] {
  --ev-accent:      var(--ev-mercado);
  --ev-accent-700:  var(--ev-mercado-700);
  --ev-accent-100:  var(--ev-mercado-100);
}
[data-accent="tatico"] {
  --ev-accent:      var(--ev-tatico);
  --ev-accent-700:  var(--ev-tatico-700);
  --ev-accent-100:  var(--ev-tatico-100);
}