/* ============================================================
   UNDIM — Design Tokens
   Marca pessoal do Prof. Leandro R. Mundim.
   Azul-marinho dominante, vermelho como sinalizador, tipografia
   editorial em Inter Tight / Inter. Gramática herdada do sistema
   da Masterclass: grid 8pt, uppercase denso, botões pill,
   uma palavra com gradiente por headline.

   Cores extraidas do logotipo: #102845 (azul-marinho), #b21d2c (vermelho).
   ============================================================ */

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

:root {
  color-scheme: dark;

  /* ─── CORES DA MARCA ───────────────────────────────────── */
  --navy-900:  #0a1a2e;   /* azul mais profundo — bandas de enfase, footer */
  --navy-800:  #102845;   /* AZUL DA MARCA — fundo principal da pagina */
  --navy-700:  #16355a;   /* superficies elevadas — cards sobre o fundo */
  --navy-600:  #1f4875;   /* bordas fortes, estados de hover */
  --red:       #b21d2c;   /* VERMELHO DA MARCA — preenchimentos solidos, CTA */
  --red-deep:  #8e1623;   /* vermelho pressionado */
  --red-bright:#ff6b7a;   /* accent em TEXTO sobre azul (o vermelho da marca
                             nao atinge contraste legivel sobre o navy) */
  --pearl:     #f5f2ec;   /* perola — texto principal sobre azul */
  --pearl-dim: #9fb0c4;   /* azul-acinzentado — texto secundario */

  /* ─── COR SEMANTICA ────────────────────────────────────── */
  --bg:          var(--navy-800);
  --bg-elevated: var(--navy-700);
  --bg-deep:     var(--navy-900);
  --bg-inverse:  var(--red);

  --fg:          var(--pearl);
  --fg-muted:    var(--pearl-dim);
  --fg-inverse:  var(--pearl);

  --border:        rgba(245, 242, 236, 0.12);
  --border-strong: rgba(245, 242, 236, 0.26);
  --border-on-red: rgba(245, 242, 236, 0.32);

  --accent: var(--red-bright);

  /* ─── TIPOGRAFIA — familia ─────────────────────────────── */
  --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* ─── PESOS ────────────────────────────────────────────── */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ─── ESCALA TIPOGRAFICA ───────────────────────────────── */
  --fs-eyebrow: 12px;
  --fs-body-sm: 14px;
  --fs-body:    16px;
  --fs-lead:    clamp(17px, 1.5vw, 20px);
  --fs-h3:      clamp(24px, 2.6vw, 34px);
  --fs-h2:      clamp(32px, 4.4vw, 60px);
  --fs-h1:      clamp(40px, 7.2vw, 96px);

  /* ─── LETTER-SPACING ───────────────────────────────────── */
  --tracking-tight:  -0.04em;   /* H1 */
  --tracking-normal: -0.025em;  /* H2, H3 */
  --tracking-wide:    0.18em;   /* codigos de disciplina, labels mono */
  --tracking-wider:   0.32em;   /* eyebrows */

  /* ─── ALTURA DE LINHA ──────────────────────────────────── */
  --lh-display: 0.98;
  --lh-tight:   1.04;
  --lh-snug:    1.12;
  --lh-body:    1.65;

  /* ─── ESPACAMENTO — grid 8pt ───────────────────────────── */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  /* ─── RAIOS ────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  /* ─── SOMBRAS — tingidas com o azul da marca ───────────── */
  --shadow-sm: 0 8px 24px rgba(5, 14, 26, 0.35);
  --shadow-md: 0 20px 60px rgba(5, 14, 26, 0.45);
  --shadow-lg: 0 30px 80px rgba(5, 14, 26, 0.55);

  /* ─── ANIMACAO ─────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.2s;
  --duration-med:  0.4s;
  --duration-slow: 0.8s;

  /* ─── GRADIENT DE ASSINATURA ───────────────────────────────
     Aplicado em UMA palavra-chave por headline. Todas as paradas
     permanecem claras o bastante para serem lidas sobre o navy. */
  --gradient-signature: linear-gradient(100deg,
    #f5f2ec 0%,
    #ffb3bb 28%,
    #ff6b7a 58%,
    #f5f2ec 100%);
}

/* ============================================================
   TIPOGRAFIA SEMANTICA
   ============================================================ */

.h1, .type-display {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--fg);
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-normal);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--fg);
}

.h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-normal);
  text-wrap: balance;
  color: var(--fg);
}

.body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

.lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: 1.55;
  color: var(--fg-muted);
}

.body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--fg-muted);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* Gradient de assinatura — uma palavra por headline */
.gradient-text {
  background: var(--gradient-signature);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--red-bright);
  animation: gradientFlow 8s ease-in-out infinite;
}

@keyframes gradientFlow {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-text { animation: none; }
}