/* SYMBOLON - Dynamic Theme CSS
 * Este arquivo é gerado dinamicamente a partir do banco de dados (SiteSettings)
 * URL: /theme.css
 * Cache: 600 segundos (10 minutos)
 */

:root {
  /* ========================================
     5 CORES EDITÁVEIS - TEMA CLARO
     Definidas no painel: /painel/configuracoes/
     ======================================== */
  --primary: #005f73;
  --secondary: #0a9396;
  --accent: #94d2bd;
  --bg: #e9f5f2;
  --text: #0b1f2a;

  /* ========================================
     DERIVADOS AUTOMÁTICOS (NÃO EDITÁVEIS)
     Calculados via color-mix para manter harmonia
     ======================================== */
  --border: color-mix(in srgb, var(--text) 20%, var(--bg));
  --muted: color-mix(in srgb, var(--text) 40%, var(--bg) 60%);
  --shadow: color-mix(in srgb, var(--text) 15%, transparent);
  --primary-hover: color-mix(in srgb, var(--primary) 85%, var(--text) 15%);
  --primary-active: color-mix(in srgb, var(--primary) 70%, var(--text) 30%);
  --secondary-hover: color-mix(in srgb, var(--secondary) 85%, var(--text) 15%);
  --accent-hover: color-mix(in srgb, var(--accent) 85%, var(--text) 15%);

  /* ========================================
     ALIASES PARA COMPATIBILIDADE
     Mantém o site funcionando com sistema de 5 cores
     ======================================== */
  --bg-primary: var(--bg);
  --bg-secondary: var(--bg);
  --text-primary: var(--text);
  --text-secondary: var(--text);
  --active: var(--primary-active);
  --success: var(--accent);
  --warning: var(--accent);
  --error: var(--accent);
  --info: var(--accent);
}

/* ========================================
   TEMA ESCURO
   Ativado via: document.documentElement.setAttribute('data-theme', 'dark')
   ======================================== */
[data-theme="dark"] {
  /* 5 cores editáveis (tema escuro) */
  --primary: #0a9396;
  --secondary: #94d2bd;
  --accent: #e9d8a6;
  --bg: #001219;
  --text: #d8f3dc;

  /* Derivados (mesma lógica do tema claro) */
  --border: color-mix(in srgb, var(--text) 20%, var(--bg));
  --muted: color-mix(in srgb, var(--text) 40%, var(--bg) 60%);
  --shadow: color-mix(in srgb, var(--text) 15%, transparent);
  --primary-hover: color-mix(in srgb, var(--primary) 85%, var(--text) 15%);
  --primary-active: color-mix(in srgb, var(--primary) 70%, var(--text) 30%);
  --secondary-hover: color-mix(in srgb, var(--secondary) 85%, var(--text) 15%);
  --accent-hover: color-mix(in srgb, var(--accent) 85%, var(--text) 15%);

  /* Aliases */
  --bg-primary: var(--bg);
  --bg-secondary: var(--bg);
  --text-primary: var(--text);
  --text-secondary: var(--text);
  --active: var(--primary-active);
  --success: var(--accent);
  --warning: var(--accent);
  --error: var(--accent);
  --info: var(--accent);
}

/* ========================================
   MODO DE ALTO CONTRASTE (ACESSIBILIDADE)
   Ativado via: document.documentElement.setAttribute('data-contrast', 'high')
   ======================================== */
[data-contrast="high"] {
  --text-color: #000 !important;
  --bg-primary: #fff !important;
  --bg-secondary: #e0e0e0 !important;
  --border-color: #000 !important;
  --link-color: #00f !important;
  --link-hover: #000 !important;
}