/*
  Theming via CSS variables
  - Keep brand tokens (lare-gold, lare-navy, lare-cream) stable across themes
  - Only override neutrals and surfaces in dark mode
*/

/* Base (light) theme variables */
:root {
  /* Brand: keep identical in light and dark */
  --color-lare-gold: #D4AF37; /* brand gold */
  --color-lare-navy: #1A2B42; /* brand navy */
  --color-lare-cream: #F8F7F4; /* brand cream (page bg) */

  /* Neutrals (light defaults) */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
}

/* Dark theme overrides (neutrals + surfaces only) */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* ======================================================= */
  /* 1. Cores de Fundo e Superfície (Hierarquia de Profundidade) */
  /* ======================================================= */

  /* Fundo principal da página (o mais escuro) */
  --color-lare-cream: #0D172A; /* page background in dark */
  --color-white: #1D2939;      /* card/surface background in dark */

  /* Superfícies de cards e pop-ups (ligeiramente mais claro) */
  --color-white: #1D2939; /* Usado por bg-white. Um cinza-azulado escuro */

  /* Cores de borda para separar elementos */
  --color-gray-200: #333F54; /* Borda subtil para os cards */
  --color-gray-300: #4A5568;

  /* ======================================================= */
  /* 2. Cores de Texto (Hierarquia de Leitura)                */
  /* ======================================================= */

  /* Cor principal para títulos e textos importantes */
  --color-lare-navy: #F0F2F5; /* Texto padrão em dark (mantém a token, mas clara) */

  /* Cor para texto secundário e descrições */
  --color-gray-500: #A0AEC0;
  --color-gray-600: #CBD5E0;

  /* Cor para texto primário (contrasta com o branco suave) */
  --color-black: #FFFFFF;

  /* ======================================================= */
  /* 3. Cor de Acento (Mantida para consistência da marca)    */
  /* ======================================================= */

  /* O dourado continua a ser a cor de destaque para botões e links */
  /* NÃO sobrescreva --color-lare-gold aqui para evitar desvios sutis */
}

/* Aplica a cor de fundo base ao body */
body {
  background-color: var(--color-lare-cream);
}

/* Garante que os cards e outras superfícies usem a nova cor de "fundo de card" */
/* NOTA: Removi o `!important` pois com a redefinição das variáveis, ele provavelmente já não é necessário, o que é uma prática melhor. */
.card, .surface, .bg-white {
  background-color: var(--color-white);
  color: var(--color-lare-navy); /* Garante que o texto dentro dos cards seja claro */
}