/* ==========================================================================
   DESIGN - camada tipografica do portal inteiro
   --------------------------------------------------------------------------
   Vem DEPOIS do style.css (includes/design_assets.php) e muda so a "voz" das letras,
   nunca o layout:
     - Titulos (h1-h3) e numeros grandes (KPI)   -> Sora, apertada
     - Rotulos, cabecalhos de tabela, selos     -> JetBrains Mono, caixa alta e espacada
     - Texto corrido, campos, botoes             -> Inter, como sempre
   Mesma ideia da landing (vitrine.css), sem animacao pesada: aqui o unico movimento
   e a entrada do titulo da pagina.
   ========================================================================== */

:root {
  --font-display: 'Sora', 'Inter', system-ui, -apple-system, sans-serif;
  /* Dourado para fundo claro (escuro o bastante para ler como texto grande). */
  --ft-gold-1: #7a4f06;
  --ft-gold-2: #9a6410;
  --ft-gold-3: #6a4505;
  --ft-ink-gold: #8a5a08;
}

:root:not([data-theme="light"]) {
  --ft-gold-1: #ffdf8e;
  --ft-gold-2: #f2bf50;
  --ft-gold-3: #cf922a;
  --ft-ink-gold: #f4c75f;
}

/* ------------------------------------------------------------ degrades -- */
.ft-gold,
.ft-silver {
  font-style: normal;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ft-gold-2);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.ft-gold {
  background-image: linear-gradient(100deg, var(--ft-gold-1) 0%, var(--ft-gold-2) 45%, var(--ft-gold-3) 100%);
}

.ft-silver {
  color: #cfd7e6;
  background-image: linear-gradient(100deg, #ffffff 0%, #b4bfd3 55%, #8e9bb3 100%);
}

/* ----------------------------------------------------------- titulos -- */
h1, h2, h3, h4 { font-family: var(--font-display); }

/* Varias telas fixavam mono nos h1 (so o nome da tabela, no tabela.php, fica de proposito). */
h1:not([style*="font-mono"]) {
  font-family: var(--font-display) !important;
  font-weight: 800;
  letter-spacing: -0.035em !important;
  text-wrap: balance;
}

h2, h3 { letter-spacing: -0.02em; }
h4 { letter-spacing: -0.01em; }

/* ---------------------------------------------- entrada do titulo da tela -- */
@keyframes ft-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

main h1,
.page-header h1,
.calendar-page-header h1 {
  animation: ft-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* --------------------------------------------------- numeros em destaque -- */
.bi-kpi-texto strong,
.stat-number,
.stat-value,
.summary-card .val,
.cal-resumo-num strong {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* ------------------------------------------- rotulos e cabecalhos mono -- */
th,
.stat-label,
.bi-kpi-texto > span,
.cal-resumo-num span {
  font-family: var(--font-mono);
  letter-spacing: 0.07em;
}

th {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}

.status-badge,
.premium-badge,
.premium-tag,
.badge,
.modal-badge,
.post-category,
.panel-tag {
  font-family: var(--font-mono) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  main h1,
  .page-header h1,
  .calendar-page-header h1 { animation: none; }
}

/* Claro: o selo "Premium" do menu lateral ficava em 4,3:1 (mono, caixa alta). */
[data-theme="light"] .user-info .premium-tag { color: #5c4210 !important; }