/* ============================================================
   Design System — Noely Alves | Tráfego Pago
   v1.0 — 2026-05-10
   Documento fonte: ObsidianVault/Decisoes/design-system-noely.md
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root {
  /* — COR — Família verde (identidade principal) */
  --c-primary:       #6c745c;  /* verde musgo — headlines em fundo claro */
  --c-ink:           #242a14;  /* verde-quase-preto — texto, contornos, ornamentos escuros */
  --c-accent-light:  #c2d7a0;  /* sage claro — destaques, palavras-chave em fundo escuro */
  --c-accent-soft:   #bcd3ae;  /* sage suave — variação do anterior */

  /* — COR — CTA (marrom, calor controlado) */
  --c-cta:           #8b5c3c;  /* marrom escuro — botão principal */
  --c-cta-soft:      #a28167;  /* marrom areia — hover/secundário */

  /* — COR — Neutros */
  --c-bg:            #f5efe4;  /* off-white quente — fundo padrão de páginas/peças */
  --c-surface:       #ffffff;  /* branco — cards, caixas, "selo postal" */
  --c-text:          var(--c-ink);
  --c-text-muted:    var(--c-primary);
  --c-text-on-dark:  #f5efe4;

  /* — TIPOGRAFIA */
  --font-display:    "Cormorant Garamond", Georgia, serif;
  --font-body:       "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Pesos (Inter) */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;

  /* Escala tipográfica — base 16px */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-lg:   1.25rem;   /* 20 */
  --fs-xl:   1.5rem;    /* 24 */
  --fs-2xl:  2rem;      /* 32 */
  --fs-3xl:  3rem;      /* 48 */
  --fs-4xl:  4.5rem;    /* 72 */

  /* Line-heights */
  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-base:  1.55;
  --lh-loose: 1.75;

  /* — TIPOGRAFIA SEMÂNTICA — usar em headings/body em qualquer superfície
     pra garantir hierarquia idêntica em bio, form, painel, PDF, etc.        */
  --type-h1-size:    var(--fs-3xl);   /* 48px */
  --type-h1-line:    var(--lh-tight);
  --type-h1-weight:  600;
  --type-h1-track:   -0.01em;

  --type-h2-size:    var(--fs-2xl);   /* 32px */
  --type-h2-line:    var(--lh-tight);
  --type-h2-weight:  600;
  --type-h2-track:   -0.005em;

  --type-h3-size:    var(--fs-lg);    /* 20px */
  --type-h3-line:    var(--lh-snug);
  --type-h3-weight:  600;
  --type-h3-track:   0;

  --type-body-size:    var(--fs-base);
  --type-body-line:    var(--lh-base);
  --type-body-weight:  400;

  --type-kicker-size:    var(--fs-xs);
  --type-kicker-weight:  600;
  --type-kicker-track:   0.18em;

  /* — LETTER-SPACING — usar em vez de valores soltos */
  --ls-tight:   -0.01em;   /* headlines grandes (cria proximidade) */
  --ls-normal:  0;
  --ls-wide:    0.18em;    /* CAPS small (wordmark, kicker padrão) */
  --ls-wider:   0.28em;    /* CAPS micro (kicker miúdo, table headers) */

  /* — ESPAÇAMENTO (escala 4px) */
  --sp-1:  0.25rem;   /* 4 */
  --sp-2:  0.5rem;    /* 8 */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-6:  1.5rem;    /* 24 */
  --sp-8:  2rem;      /* 32 */
  --sp-12: 3rem;      /* 48 */
  --sp-16: 4rem;      /* 64 */
  --sp-24: 6rem;      /* 96 */

  /* — RAIO DE BORDA */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-pill: 9999px;

  /* — SOMBRAS (suaves, pra não brigar com o tom orgânico) */
  --shadow-sm: 0 1px 2px rgba(36, 42, 20, 0.06);
  --shadow-md: 0 4px 12px rgba(36, 42, 20, 0.08);
  --shadow-lg: 0 12px 32px rgba(36, 42, 20, 0.12);

  /* — TRANSIÇÕES */
  --t-fast:   120ms ease;
  --t-base:   200ms ease;
  --t-slow:   320ms ease;
}

/* — BREAKPOINTS (referência, usar via @media)
   sm:  640px — celular landscape
   md:  768px — tablet
   lg: 1024px — desktop
   xl: 1280px — desktop largo
   ============================================================ */

/* ----------------------------------------------------------------
   Tipografia base
---------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-bg);
}

.display {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--c-primary);
}

/* ----------------------------------------------------------------
   Wordmark / Assinatura — recorrente em todos os posts
   "NOELY ALVES | TRÁFEGO PAGO"
---------------------------------------------------------------- */
.wordmark {
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: var(--fs-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.wordmark__sep {
  margin: 0 0.6em;
  opacity: 0.5;
}

/* ----------------------------------------------------------------
   Botão CTA principal — marrom, pílula, peso médio
---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-body);
  font-weight: var(--w-semi);
  font-size: var(--fs-base);
  letter-spacing: 0.03em;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  transition: background var(--t-base), transform var(--t-fast);
  text-decoration: none;
}
.btn--primary {
  background: var(--c-cta);
  color: var(--c-surface);
}
.btn--primary:hover {
  background: var(--c-cta-soft);
}
.btn--primary:active {
  transform: scale(0.98);
}
.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border: 1.5px solid var(--c-ink);
}
.btn--ghost:hover {
  background: var(--c-ink);
  color: var(--c-bg);
}