/* ============================================================
   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;

  /* ============================================================
     v1.1 (2026-05-19) — extensão pra Área do Aluno (soft 2026 glass)
     Princípio V atualizado: paleta-mãe preservada, novos tokens
     adicionam profundidade sem substituir a identidade Noely.
     ============================================================ */

  /* — GRADIENTES warm (background da página) */
  --gradient-canvas:       linear-gradient(155deg, #f7f1e6 0%, #ecdcc1 45%, #e6e8d6 100%);
  --gradient-canvas-soft:  linear-gradient(170deg, #faf5ec 0%, #f2e6d2 100%);
  --gradient-hero-warm:    radial-gradient(ellipse at top right, #ecdcc1 0%, transparent 55%),
                           radial-gradient(ellipse at bottom left, #e0e8d2 0%, transparent 60%),
                           #f5efe4;
  --gradient-photo-shade:  linear-gradient(180deg, transparent 35%, rgba(36, 42, 20, 0.68) 100%);

  /* — GLASS SURFACES (cards, painéis, navs) */
  --surface-glass:         rgba(255, 254, 250, 0.72);
  --surface-glass-strong:  rgba(255, 254, 250, 0.86);
  --surface-glass-tint:    rgba(245, 239, 228, 0.78);
  --surface-glass-warm:    rgba(236, 220, 193, 0.62);
  --surface-elevated:      #ffffff;
  --hairline:              rgba(36, 42, 20, 0.08);
  --hairline-strong:       rgba(36, 42, 20, 0.14);

  /* — BLURS pro backdrop-filter (com fallback abaixo) */
  --blur-soft:    blur(12px) saturate(118%);
  --blur-strong:  blur(22px) saturate(125%);

  /* — SOMBRAS de elevação (com 2-layer pra realismo) */
  --shadow-lift:        0 1px 2px rgba(36, 42, 20, 0.04), 0 8px 28px rgba(36, 42, 20, 0.06);
  --shadow-lift-strong: 0 2px 4px rgba(36, 42, 20, 0.06), 0 18px 48px rgba(36, 42, 20, 0.12);
  --shadow-inset:       inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* — RAIOS GENEROSOS pra superfícies grandes */
  --r-xl:    20px;
  --r-2xl:   24px;
  --r-3xl:   32px;

  /* — TAMANHOS RESPONSIVOS de display (clamp) */
  --display-2xl: clamp(2.5rem, 5vw + 1rem, 4rem);   /* 40 → 64 */
  --display-xl:  clamp(2rem, 3.5vw + 1rem, 3rem);    /* 32 → 48 */
  --display-lg:  clamp(1.5rem, 2vw + 1rem, 2rem);    /* 24 → 32 */

  /* — TINTAS DE ESTADOS pros cards de semana */
  --state-done-bg:    #e7f1da;
  --state-done-fg:    #2d4413;
  --state-current-bg: linear-gradient(135deg, #fff4e9 0%, #ffffff 100%);
  --state-current-fg: var(--c-cta);
  --state-locked-bg:  rgba(235, 229, 214, 0.55);
  --state-locked-fg:  rgba(36, 42, 20, 0.42);

  /* — SEMANA CARD radius coerente com glass */
  --r-card:   var(--r-xl);
  --r-card-lg:var(--r-2xl);
}

/* Fallback pra navegadores sem backdrop-filter (raro em 2026) */
@supports not (backdrop-filter: blur(8px)) {
  :root {
    --surface-glass:        rgba(255, 254, 250, 0.96);
    --surface-glass-strong: rgba(255, 254, 250, 1);
    --surface-glass-tint:   rgba(245, 239, 228, 0.96);
    --surface-glass-warm:   rgba(236, 220, 193, 0.92);
  }
}

/* — 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);
}