/* ============================================================
   Mentoria Devir — Design Tokens
   Cores e tipografia. Variáveis base + semânticas.
   ============================================================ */

/* ---------- Fontes locais da marca ----------
   Apenas Light (300) e Regular (400) foram fornecidos.
   Pesos mais fortes (500, 700) são sintetizados pelo navegador
   via font-synthesis — diferença visual mínima, aceitável neste sistema.
   Caminho relativo a partir de qualquer arquivo que importe este CSS:
   resolvido via URL absoluta a partir da raiz do projeto.
   ============================================================ */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/CormorantGaramond-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/CormorantGaramond-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Lato-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Lato-Regular.ttf') format('truetype');
}

:root {
  /* ---------- Cor — paleta base ---------- */
  --devir-cream:        #f3efe7;   /* fundo padrão */
  --devir-ink:          #2b2b2b;   /* texto, traços, ícones */
  --devir-moss:         #4a5a47;   /* acento único */

  /* opacidades sobre ink (geram cinzas dentro do sistema, sem novos hex) */
  --devir-ink-85:       rgba(43,43,43,.85);
  --devir-ink-70:       rgba(43,43,43,.70);
  --devir-ink-55:       rgba(43,43,43,.55);
  --devir-ink-40:       rgba(43,43,43,.40);
  --devir-ink-25:       rgba(43,43,43,.25);
  --devir-ink-15:       rgba(43,43,43,.15);
  --devir-ink-08:       rgba(43,43,43,.08);

  /* opacidades sobre moss (estados interativos) */
  --devir-moss-15:      rgba(74,90,71,.15);
  --devir-moss-08:      rgba(74,90,71,.08);

  /* ---------- Cor — semântica ---------- */
  --bg:                 var(--devir-cream);
  --fg:                 var(--devir-ink);
  --fg-muted:           var(--devir-ink-70);
  --fg-soft:            var(--devir-ink-55);
  --fg-faint:           var(--devir-ink-40);
  --accent:             var(--devir-moss);
  --rule:               var(--devir-ink-15);
  --rule-strong:        var(--devir-ink);
  --hover-tint:         var(--devir-moss-15);
  --selection-bg:       var(--devir-moss-15);
  --focus-ring:         var(--devir-moss);

  /* ---------- Tipografia — famílias ---------- */
  --font-display:       'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-body:          'Lato', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:          ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Tipografia — escala ---------- */
  --fs-display:         88px;   /* hero único, raro */
  --fs-h1:              64px;
  --fs-h2:              44px;
  --fs-h3:              28px;
  --fs-h4:              22px;
  --fs-lead:            19px;   /* parágrafo de abertura */
  --fs-body:            16px;
  --fs-small:           14px;
  --fs-caption:         13px;
  --fs-micro:           11px;

  /* ---------- Tipografia — entrelinha ---------- */
  --lh-tight:           1.05;
  --lh-snug:            1.15;
  --lh-normal:          1.35;
  --lh-relaxed:         1.6;
  --lh-loose:           1.75;

  /* ---------- Tipografia — tracking ---------- */
  --tr-tight:          -0.01em;
  --tr-normal:          0;
  --tr-wide:            0.04em;
  --tr-wider:           0.08em;

  /* ---------- Espaçamento (escala 4px) ---------- */
  --sp-1:    4px;
  --sp-2:    8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10: 128px;

  /* ---------- Larguras de leitura ---------- */
  --measure-text:       640px;   /* texto corrido */
  --measure-wide:       880px;   /* layouts compostos */
  --measure-page:      1120px;   /* página completa */

  /* ---------- Bordas e cantos ---------- */
  --radius-none:        0;
  --radius-sm:          2px;     /* máximo permitido */
  --border-hairline:    1px solid var(--rule);
  --border-strong:      1px solid var(--rule-strong);

  /* ---------- Movimento ---------- */
  --ease:               cubic-bezier(.2,.6,.2,1);
  --dur-fast:           160ms;
  --dur:                240ms;
  --dur-slow:           480ms;
}

/* ============================================================
   Reset suave + base do documento
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--selection-bg);
  color: var(--fg);
}

/* ============================================================
   Tipografia semântica
   ============================================================ */

h1, h2, h3, h4, h5, h6, .display {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--fg);
  margin: 0 0 var(--sp-5);
  text-wrap: balance;
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
}

h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: 500;
}

h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-normal);
  font-weight: 500;
}

p {
  margin: 0 0 var(--sp-5);
  max-width: var(--measure-text);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--fg);
}

.caption,
.eyebrow {
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-wide);
  color: var(--fg-muted);
  font-weight: 400;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--tr-wider);
}

small, .small {
  font-size: var(--fs-small);
  color: var(--fg-muted);
}

em, i, .italic {
  font-style: italic;
}

strong, b {
  font-weight: 700;
}

/* Citação literária — não decorada */
blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h4);
  line-height: var(--lh-normal);
  margin: var(--sp-7) 0;
  padding-left: var(--sp-5);
  border-left: 1px solid var(--accent);
  max-width: var(--measure-text);
  color: var(--fg);
}

blockquote cite {
  display: block;
  margin-top: var(--sp-4);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-wide);
  color: var(--fg-muted);
}

blockquote cite::before { content: '— '; }

/* Links */
a {
  color: var(--fg);
  text-decoration-color: var(--fg-faint);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--dur) var(--ease),
              text-decoration-color var(--dur) var(--ease);
}

a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Régua tipográfica — não decorativa */
hr {
  border: 0;
  border-top: var(--border-hairline);
  margin: var(--sp-8) 0;
}

/* Pontuação ornamental */
.colophon {
  display: block;
  text-align: center;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1;
  margin: var(--sp-8) auto;
  letter-spacing: var(--tr-wider);
}

/* Código — raro, mas previsto */
code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--devir-ink-08);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

pre {
  padding: var(--sp-4) var(--sp-5);
  overflow-x: auto;
  line-height: var(--lh-normal);
}
pre code { background: transparent; padding: 0; }