/* =============================================================================
   Acorda pra Física — Design Tokens
   Cores, tipografia, espaçamento, sombras, bordas
   ============================================================================= */

/* Sistema tipográfico: Montserrat (display/títulos) + DM Sans (corpo) + Source Serif 4 (ênfase/equações) + JetBrains Mono (chips/código).
   Carregadas via Google Fonts com cobertura completa (pesos 100–900/1000, regular + italic).
   Os arquivos em fonts/ funcionam como fallback offline. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* Fallback offline — Source Serif 4 (fornecida pelo cliente em fonts/) */
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/SourceSerif4-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/SourceSerif4-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* Montserrat italic — fornecida pelo cliente (regulars vem do Google Fonts até você enviar) */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- COLORS — palette ---------- */
  --red-deep:   #890F15;
  --red:        #B21119;
  --pink-soft:  #ECC4CC;
  --navy:       #14344C;
  --paper:      #F7F7F7;
  --steel:      #84939E;

  /* tints / alpha helpers */
  --pink-30:    rgba(236, 196, 204, 0.30);
  --pink-60:    rgba(236, 196, 204, 0.60);
  --navy-08:    rgba(20, 52, 76, 0.08);
  --navy-12:    rgba(20, 52, 76, 0.12);
  --navy-40:    rgba(20, 52, 76, 0.40);
  --red-12:     rgba(178, 17, 25, 0.12);
  --steel-30:   rgba(132, 147, 158, 0.30);

  /* ---------- COLORS — semantic ---------- */
  --bg:           var(--paper);
  --bg-alt:       #F1ECEC; /* paper warmed slightly toward pink */
  --bg-seal:      var(--navy);
  --bg-highlight: var(--pink-30);

  --fg:           var(--navy);      /* texto principal — NÃO use #000 */
  --fg-muted:     var(--steel);
  --fg-on-dark:   var(--paper);
  --fg-accent:    var(--red);
  --fg-accent-2:  var(--red-deep);

  --border:       var(--navy);
  --border-soft:  var(--steel-30);
  --rule:         var(--steel-30);

  /* ---------- TYPOGRAPHY — families ---------- */
  /* Sistema: Montserrat (display/títulos) + DM Sans (corpo) + Source Serif 4 (ênfase/equações) */
  --font-display: 'Montserrat', 'Helvetica Neue', sans-serif;
  --font-head:    'Montserrat', 'Helvetica Neue', sans-serif;
  --font-body:    'DM Sans', 'Helvetica Neue', sans-serif;
  --font-serif:   'Source Serif 4', 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---------- TYPOGRAPHY — sizes (slide 1920×1080 baseline) ---------- */
  --fs-display:   148px;  /* AULA 03 — capa (Montserrat 900 é mais largo que Bebas, ajustado) */
  --fs-h1:        96px;
  --fs-h2:        64px;
  --fs-h3:        44px;
  --fs-lead:      36px;
  --fs-body:      28px;
  --fs-small:     22px;
  --fs-foot:      18px;

  /* line-heights */
  --lh-tight:     1.05;
  --lh-snug:      1.20;
  --lh-normal:    1.45;
  --lh-loose:     1.60;

  /* letter-spacing */
  --ls-seal:      0.08em;   /* selos / CAIXA ALTA (Montserrat é mais "aberto" que Bebas) */
  --ls-display:   0.02em;
  --ls-heading:   -0.015em;
  --ls-body:      0;

  /* font-weights */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-bold:      700;
  --fw-black:     900;

  /* ---------- SPACING — base-4 scale ---------- */
  --s-0:    0;
  --s-1:    4px;
  --s-2:    8px;
  --s-3:    12px;
  --s-4:    16px;
  --s-5:    24px;
  --s-6:    32px;
  --s-7:    48px;
  --s-8:    64px;
  --s-9:    96px;
  --s-10:  128px;

  --slide-margin: 96px;   /* margem padrão do slide */
  --gutter:       24px;

  /* ---------- RADIUS ---------- */
  --r-0:    0;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-pill: 9999px;

  /* ---------- BORDER WIDTHS ---------- */
  --bw-hair:   1px;
  --bw-base:   1.5px;
  --bw-bold:   3px;
  --bw-seal:   6px;     /* anel do selo */

  /* ---------- SHADOWS ---------- */
  --sh-paper:   0 1px 0 rgba(20,52,76,0.07), 0 8px 24px -12px rgba(20,52,76,0.18);
  --sh-card:    0 1px 0 rgba(20,52,76,0.12), 0 12px 32px -16px rgba(20,52,76,0.25);
  --sh-seal:    0 2px 0 #890F15, 0 14px 0 -10px rgba(178,17,25,0.12);
  --sh-inset:   inset 0 0 0 1.5px var(--navy);

  /* ---------- TIMING ---------- */
  --t-fast:   80ms;
  --t-base:   120ms;
  --t-slow:   200ms;
  --easing:   cubic-bezier(0.2, 0.0, 0.2, 1);
}

/* =============================================================================
   Base + semantic element styles
   ============================================================================= */

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 { margin: 0; color: var(--fg); }

h1 {
  font-family: var(--font-head);
  font-weight: var(--fw-black);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
}
h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
}
h3 {
  font-family: var(--font-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

.display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-display);
  letter-spacing: var(--ls-display);
  line-height: 0.95;
  color: var(--red);
  text-transform: uppercase;
}

.seal {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ls-seal);
  color: var(--red);
}

p, li { font-size: var(--fs-body); line-height: var(--lh-normal); }

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

.eq, var, .var {
  font-family: var(--font-serif);
  font-style: italic;
}
.eq .op, .eq .unit { font-style: normal; }

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.highlight {
  background: linear-gradient(transparent 55%, var(--pink-60) 55%);
  padding: 0 2px;
}

hr {
  border: none;
  border-top: var(--bw-base) solid var(--rule);
  margin: var(--s-6) 0;
}

a {
  color: var(--red);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}