/* ============================================================
   TERPIA — Design Tokens (CSS)
   v1.0 · agosto de 2026
   ------------------------------------------------------------
   Fonte da verdade: extraído e alinhado com o protótipo navegável
   em app-prototipo/styles.css e com o Brand Guideline oficial.
   Importar este arquivo antes de qualquer CSS de tela/componente.
   ============================================================ */

/* ---------- Fontes ----------
   Trajan Pro 3 licenciada (.otf) — usar SOMENTE para o logotipo e
   títulos de destaque. Pesos disponíveis: 200 / 300 / 400 / 600.
   NÃO existe peso 700 (Bold) licenciado — nunca usar font-weight:700
   ou negrito sintético do navegador nesta fonte. */
@font-face {
  font-family: "Trajan Pro 3";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("../fonts/TrajanPro3-ExtraLight.otf") format("opentype");
}
@font-face {
  font-family: "Trajan Pro 3";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/TrajanPro3-Light.otf") format("opentype");
}
@font-face {
  font-family: "Trajan Pro 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/TrajanPro3-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Trajan Pro 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/TrajanPro3-Semibold.otf") format("opentype");
}

/* DM Sans — fonte de interface, auto-hospedada, sem CDN externo. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/DMSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/DMSans-Italic.woff2") format("woff2");
}

:root {
  /* ---------- Cor — paleta oficial ----------
     Nunca hardcodar hex direto em componentes — sempre via var(--token). */
  --green-forest: #0F2A1F;   /* primária institucional — ~55% da aplicação */
  --green-mid: #3D5A4C;      /* secundária — fundos alternativos, navegação */
  --green-soft: #6E7F6B;     /* apoio — ícones, cards, ~12% da aplicação */
  --green-light: #B8F3D2;    /* tag verde clara (uso pontual em badges) */
  --gold: #C6A15A;           /* acento principal — ~5%, nunca dominante */
  --gold-light: #E2C98B;     /* champagne — detalhe sobre fundo escuro, ~3% */
  --gold-deep: #A9823F;      /* hover/estado do dourado */
  --cream: #F5F2EC;          /* fundo institucional — ~25% da aplicação */
  --cream-white: #FDFCF9;    /* superfícies elevadas (cards, modais) */
  --text-dark: #1A211C;      /* texto de corpo — nunca #000 puro */
  --text-muted: #6B6255;     /* texto secundário / legendas */
  --line: #E3D9C4;           /* bordas e divisores sutis */
  --error: #A9503D;          /* estado de erro/alerta — uso funcional apenas */
  --success: #2E8B57;        /* estado de sucesso — uso funcional apenas */
  --white: #FFFFFF;

  --green-gradient: linear-gradient(155deg, #1E4B36 0%, var(--green-forest) 48%, #081711 100%);
  --icon-badge-shadow: 0 4px 12px rgba(8, 23, 17, 0.35);
  --icon-badge-ring: inset 0 0 0 1px rgba(226, 201, 139, 0.22);

  /* ---------- Tipografia ----------
     Display = Trajan Pro 3 (logotipo e títulos apenas).
     Interface = DM Sans (tudo o resto: corpo, UI, formulários). */
  --font-display: "Trajan Pro 3", Georgia, "Times New Roman", serif;
  --font-sans: "DM Sans", Arial, Helvetica, sans-serif;

  /* ---------- Forma ---------- */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 100px;

  /* ---------- Sombra ---------- */
  --shadow-sm: 0 2px 10px rgba(15, 42, 31, 0.07);
  --shadow-md: 0 10px 30px rgba(15, 42, 31, 0.12);
  --shadow-lg: 0 22px 60px rgba(15, 42, 31, 0.18);

  /* Sombras em camadas — usar em cards de conteúdo para profundidade sutil
     em vez de uma sombra chapada única. */
  --card-shadow-sm: 0 1px 2px rgba(15, 42, 31, 0.05), 0 6px 16px rgba(15, 42, 31, 0.08);
  --card-shadow-sm-hover: 0 2px 5px rgba(15, 42, 31, 0.07), 0 13px 28px rgba(15, 42, 31, 0.13);
  --card-shadow: 0 1px 3px rgba(15, 42, 31, 0.06), 0 10px 26px rgba(15, 42, 31, 0.10);
  --card-shadow-hover: 0 3px 8px rgba(15, 42, 31, 0.09), 0 20px 44px rgba(15, 42, 31, 0.16);
  --card-border: 1px solid rgba(227, 217, 196, 0.65);

  /* ---------- Layout ---------- */
  --header-h: 68px;
  --bottomnav-h: 72px;
  --max-content: 1180px;
  --bp-mobile-max: 899px;   /* <900px: navegação inferior mobile */
  --bp-desktop-min: 900px;  /* ≥900px: sidebar fixa desktop */

  /* ---------- Movimento ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 180ms;
  --t-med: 280ms;
  --t-slow: 350ms;
}

/* Sempre respeitar a preferência do usuário por menos movimento. */
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; --t-slow: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Reset mínimo recomendado ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }

/* Estado de foco visível obrigatório em TODO elemento interativo (acessibilidade). */
:focus-visible {
  outline: 2.5px solid var(--gold-deep);
  outline-offset: 2px;
  border-radius: 6px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}