/* ============================================================
   VITALINK — DESIGN TOKENS
   Fonte única de verdade para cores, tipografia, raio e sombra.
   Todas as páginas em /public devem importar este arquivo em vez
   de redefinir :root localmente — isso é o que garante consistência
   visual entre landing, páginas institucionais e painel admin.

   Paleta editorial clara (v2) — substitui o tema escuro/neon
   original para reduzir fadiga visual e afastar a estética
   "dark SaaS genérico gerado por IA".
   ============================================================ */

:root {
  /* ---------- Superfícies ---------- */
  --bg-primary: #FAF9F6;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F3F1EC;
  --bg-glass: rgba(20, 20, 20, 0.035);

  /* aliases usados pelas páginas institucionais e pelo painel */
  --bg: #FAF9F6;
  --bg-2: #FFFFFF;
  --bg-3: #F3F1EC;
  --bg-4: #ECE9E2;

  /* ---------- Bordas ---------- */
  --border: rgba(20, 20, 20, 0.09);
  --border-accent: rgba(20, 20, 20, 0.16);
  --border-hi: rgba(20, 20, 20, 0.16);

  /* ---------- Texto ---------- */
  --text-primary: #1C1D21;
  --text-secondary: #5B5D66;
  --text-muted: #90929C;
  --text: #1C1D21;
  --text-2: #5B5D66;
  --text-3: #90929C;

  /* ---------- Marca (fonte da verdade) ---------- */
  --color-brand: #145C4B;           /* verde petróleo — primário */
  --color-brand-dim: rgba(20, 92, 75, 0.10);
  --color-brand-2: #C7742E;         /* terracota — secundário/calor */
  --color-brand-2-dim: rgba(199, 116, 46, 0.12);

  /* ---------- Categorias / status ---------- */
  --color-tech: #1D5C8A;
  --color-tech-dim: rgba(29, 92, 138, 0.10);
  --color-fit: #B8592E;
  --color-fit-dim: rgba(184, 89, 46, 0.10);
  --color-deal: #B0362B;            /* desconto / urgência */
  --color-deal-dim: rgba(176, 54, 43, 0.10);
  --color-gold: #A9781E;            /* destaque / featured */
  --color-gold-dim: rgba(169, 120, 30, 0.12);

  /* ---------- Aliases legados ----------
     Mantidos porque index.html / panel.html / páginas institucionais
     ainda referenciam esses nomes em dezenas de regras. Apontam para
     a nova paleta acima — migrar para os nomes semânticos (--color-*)
     gradualmente conforme cada arquivo for revisitado. */
  --accent-blue: var(--color-brand);
  --accent-blue-dim: var(--color-brand-dim);
  --accent-green: var(--color-brand-2);
  --accent-green-dim: var(--color-brand-2-dim);
  --accent-amber: var(--color-gold);
  --accent-amber-dim: var(--color-gold-dim);
  --accent-red: var(--color-deal);
  --accent-red-dim: var(--color-deal-dim);

  --blue: var(--color-brand);
  --blue-dim: var(--color-brand-dim);
  --green: var(--color-brand-2);
  --green-dim: var(--color-brand-2-dim);
  --amber: var(--color-gold);
  --amber-dim: var(--color-gold-dim);
  --red: var(--color-deal);
  --red-dim: var(--color-deal-dim);
  --purple: #6B5CA5;
  --purple-dim: rgba(107, 92, 165, 0.10);
  --teal: #1D8A82;
  --teal-dim: rgba(29, 138, 130, 0.10);

  /* ---------- Tipografia ---------- */
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-ui: 'Manrope', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* ---------- Raio ---------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --r: 10px;
  --r-lg: 16px;
  --r-xl: 20px;

  /* ---------- Sombra ---------- */
  --shadow-card: 0 4px 24px rgba(20, 20, 20, 0.06);
  --shadow-glow-blue: 0 8px 24px rgba(20, 92, 75, 0.12);
  --shadow-glow-green: 0 8px 24px rgba(199, 116, 46, 0.10);
}