/* =========================================================
   Thais Grecca — Color & Type Tokens
   Identidade editorial. Vinho · Tinta · Papel · Mostarda · Pergaminho
   ========================================================= */

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

:root {
  /* ---------- Palette (raw) ---------- */
  --tg-vinho:       #6B1F2A;   /* Primária. Autoridade discreta. */
  --tg-tinta:       #1A1A1A;   /* Texto / fundos escuros */
  --tg-papel:       #F5F0E8;   /* Off-white quente. Fundo padrão */
  --tg-mostarda:    #B8862B;   /* Accent raríssimo. Selos, tags */
  --tg-pergaminho:  #D8D2C5;   /* Bordas, divisores, cards internos */

  /* Tints derivados — uso interno (microcopy, hover, sutilezas).
     Não inventar fora deste conjunto. */
  --tg-vinho-deep:    #4F141C;   /* hover/active sobre vinho */
  --tg-vinho-soft:    #8A3B47;   /* divisores em fundo escuro */
  --tg-tinta-60:      #6E6E6E;   /* microcopy "cinza 60%" */
  --tg-tinta-40:      #A8A8A8;   /* placeholder, disabled */
  --tg-papel-deep:    #ECE5D6;   /* card interno sobre papel */
  --tg-papel-pure:    #FBF8F2;   /* topo de página, breath */

  /* ---------- Semantic colors ---------- */
  --tg-bg:           var(--tg-papel);
  --tg-bg-alt:       var(--tg-papel-deep);
  --tg-bg-inverse:   var(--tg-tinta);
  --tg-bg-brand:     var(--tg-vinho);

  --tg-fg:           var(--tg-tinta);
  --tg-fg-muted:     var(--tg-tinta-60);
  --tg-fg-subtle:    var(--tg-tinta-40);
  --tg-fg-inverse:   var(--tg-papel);
  --tg-fg-brand:     var(--tg-vinho);
  --tg-fg-accent:    var(--tg-mostarda);

  --tg-border:       var(--tg-pergaminho);
  --tg-border-strong:var(--tg-vinho);
  --tg-rule:         var(--tg-pergaminho);

  /* ---------- Type families ---------- */
  --tg-font-display: 'EB Garamond', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --tg-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tg-font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type scale ---------- */
  --tg-size-h1:      48px;
  --tg-size-h2:      32px;
  --tg-size-h3:      20px;
  --tg-size-body:    16px;
  --tg-size-small:   14px;
  --tg-size-micro:   12px;
  --tg-size-tag:     11px;

  --tg-leading-tight:  1.15;
  --tg-leading-snug:   1.3;
  --tg-leading-body:   1.55;
  --tg-leading-relaxed:1.7;

  --tg-track-tag:    0.22em;   /* letterspacing aberto p/ mono uppercase */
  --tg-track-small:  0.04em;

  /* ---------- Spacing scale (8px base, editorial generosity) ---------- */
  --tg-space-1:  4px;
  --tg-space-2:  8px;
  --tg-space-3:  12px;
  --tg-space-4:  16px;
  --tg-space-5:  24px;
  --tg-space-6:  32px;
  --tg-space-7:  48px;
  --tg-space-8:  64px;
  --tg-space-9:  96px;

  /* ---------- Radii — discretos. Nunca pílula. ---------- */
  --tg-radius-sm: 2px;
  --tg-radius-md: 3px;     /* botão WhatsApp */
  --tg-radius-lg: 4px;
  --tg-radius-card: 4px;

  /* ---------- Rules (linhas/divisores) ---------- */
  --tg-rule-thin:   1px;
  --tg-rule-bar:    3px;   /* barra lateral de citação */
  --tg-rule-bar-lg: 4px;

  /* ---------- Motion ---------- */
  --tg-ease:        cubic-bezier(.2,.6,.2,1);
  --tg-dur-fast:    120ms;
  --tg-dur:         200ms;
  --tg-dur-slow:    360ms;
}

/* =========================================================
   Semantic element styles — use directly or compose.
   ========================================================= */

.tg-h1, h1.tg {
  font-family: var(--tg-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--tg-size-h1);
  line-height: var(--tg-leading-tight);
  color: var(--tg-fg);
  letter-spacing: -0.005em;
  text-wrap: pretty;
  margin: 0;
}

.tg-h2, h2.tg {
  font-family: var(--tg-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--tg-size-h2);
  line-height: var(--tg-leading-snug);
  color: var(--tg-fg);
  text-wrap: pretty;
  margin: 0;
}

.tg-h3, h3.tg {
  font-family: var(--tg-font-body);
  font-weight: 500;
  font-size: var(--tg-size-h3);
  line-height: var(--tg-leading-snug);
  color: var(--tg-fg-brand);
  letter-spacing: var(--tg-track-small);
  margin: 0;
}

.tg-body, p.tg {
  font-family: var(--tg-font-body);
  font-weight: 400;
  font-size: var(--tg-size-body);
  line-height: var(--tg-leading-body);
  color: var(--tg-fg);
  text-wrap: pretty;
  margin: 0;
}

.tg-micro {
  font-family: var(--tg-font-body);
  font-weight: 400;
  font-size: var(--tg-size-micro);
  line-height: var(--tg-leading-body);
  color: var(--tg-fg-muted);
}

.tg-tag {
  font-family: var(--tg-font-mono);
  font-weight: 400;
  font-size: var(--tg-size-tag);
  letter-spacing: var(--tg-track-tag);
  text-transform: uppercase;
  color: var(--tg-fg-brand);
}

.tg-tag--mustard { color: var(--tg-fg-accent); }
.tg-tag--inverse { color: var(--tg-fg-inverse); }

/* Quote — barra lateral vinho 3px, italic Garamond */
.tg-quote {
  font-family: var(--tg-font-display);
  font-style: italic;
  font-size: 22px;
  line-height: var(--tg-leading-snug);
  color: var(--tg-fg);
  border-left: var(--tg-rule-bar) solid var(--tg-vinho);
  padding-left: var(--tg-space-5);
  margin: 0;
}

/* Editorial dash tag: — CASE 01 — */
.tg-dash-tag {
  font-family: var(--tg-font-mono);
  font-size: var(--tg-size-tag);
  letter-spacing: var(--tg-track-tag);
  text-transform: uppercase;
  color: var(--tg-fg-brand);
}
.tg-dash-tag::before { content: "— "; }
.tg-dash-tag::after  { content: " —"; }

/* Mustard capsule tag — uso raro, "carimbo" */
.tg-capsule {
  display: inline-block;
  font-family: var(--tg-font-mono);
  font-size: var(--tg-size-tag);
  letter-spacing: var(--tg-track-tag);
  text-transform: uppercase;
  background: var(--tg-mostarda);
  color: var(--tg-tinta);
  padding: 4px 10px 3px;
  border-radius: var(--tg-radius-sm);
}

/* Rule line (1px, pergaminho) */
.tg-rule {
  border: 0;
  border-top: var(--tg-rule-thin) solid var(--tg-rule);
  margin: var(--tg-space-7) 0;
}
.tg-rule--vinho { border-top-color: var(--tg-vinho); }
.tg-rule--double {
  border: 0;
  border-top: 1px solid var(--tg-vinho);
  border-bottom: 1px solid var(--tg-vinho);
  height: 4px;
}

/* Primary button — vinho, papel, cantos 3px */
.tg-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tg-font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  padding: 14px 22px;
  background: var(--tg-vinho);
  color: var(--tg-papel);
  border: 1px solid var(--tg-vinho);
  border-radius: var(--tg-radius-md);
  cursor: pointer;
  transition: background var(--tg-dur) var(--tg-ease),
              transform var(--tg-dur-fast) var(--tg-ease);
}
.tg-btn:hover  { background: var(--tg-vinho-deep); border-color: var(--tg-vinho-deep); }
.tg-btn:active { transform: translateY(1px); }

.tg-btn--ghost {
  background: transparent;
  color: var(--tg-vinho);
  border: 1px solid var(--tg-vinho);
}
.tg-btn--ghost:hover { background: var(--tg-vinho); color: var(--tg-papel); }

/* Body-level base — opt-in */
.tg-page {
  background: var(--tg-bg);
  color: var(--tg-fg);
  font-family: var(--tg-font-body);
  font-size: var(--tg-size-body);
  line-height: var(--tg-leading-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}