/**
 * Theme Override CSS
 * Este arquivo permite personalizar a paleta de cores da aplicação
 * sem precisar modificar o código-fonte.
 * 
 * Todas as cores da aplicação são definidas aqui e podem ser facilmente
 * personalizadas simplesmente editando este arquivo.
 */

/**
 * Definição das cores básicas (paleta de cores) 
 * Estas variáveis são usadas como base para os temas claro e escuro
 */
:root {
  /* Cores principais - usadas em ambos os temas */
  --primary-color: #27FAFF;      /* Cor ciano brilhante - usada como destaque principal no tema escuro */
  --secondary-color: #414243;    /* Cinza médio - usado para áreas secundárias, botões alternativos */
  --accent-color: #535456;       /* Cinza mais escuro - usado para bordas e acentos visuais */
  
  /* Cor especial para tema claro */
  --primary-color-light: #0c4a6e; /* Azul escuro - usado como cor principal no tema claro para melhor contraste */
  
  /* Cores específicas do tema escuro */
  --dark-bg: #2d2d2e;            /* Fundo quase preto - cor de fundo principal do tema escuro */
  --dark-card: #414243;          /* Cinza médio - cor de fundo para cartões e elementos destacados no tema escuro */
  --dark-border: #535456;        /* Cinza mais escuro - cor para bordas e separadores no tema escuro */
  --dark-text: #f1f1f1;          /* Branco suave - cor principal para textos no tema escuro */
  
  /* Cores específicas do tema claro */
  --light-bg: #f8f9fa;           /* Cinza muito claro - cor de fundo principal do tema claro */
  --light-card: #ffffff;         /* Branco puro - cor de fundo para cartões e elementos destacados no tema claro */
  --light-border: #e2e8f0;       /* Cinza claro - cor para bordas e separadores no tema claro */
  --light-text: #1a202c;         /* Quase preto - cor principal para textos no tema claro */
}

/**
 * Tema Claro (Default)
 * Definições de todas as variáveis CSS para o tema claro
 */
:root {
  /* Cores de fundo e texto */
  --background: var(--light-bg);           /* Fundo principal da página */
  --foreground: var(--light-text);         /* Texto principal */
  
  /* Elementos de cartão */
  --card: var(--light-card);               /* Fundo dos cartões/painéis */
  --card-foreground: var(--light-text);    /* Texto dentro dos cartões */
  
  /* Elementos de popover (tooltips, menus suspensos) */
  --popover: var(--light-card);            /* Fundo de popovers */
  --popover-foreground: var(--light-text); /* Texto dentro de popovers */
  
  /* Elementos primários (botões principais, links, etc) */
  --primary: var(--primary-color-light);   /* Cor principal - azul escuro no tema claro */
  --primary-foreground: #ffffff;           /* Texto sobre elementos primários - branco para contraste */
  
  /* Elementos secundários (botões alternativos, etc) */
  --secondary: var(--secondary-color);     /* Cor secundária */
  --secondary-foreground: var(--light-card); /* Texto sobre elementos secundários */
  
  /* Elementos atenuados (textos menos importantes, áreas desabilitadas) */
  --muted: var(--light-border);            /* Fundo para áreas atenuadas */
  --muted-foreground: #64748b;             /* Texto atenuado */
  
  /* Elementos de destaque (menos proeminentes que primários) */
  --accent: var(--accent-color);           /* Cor de destaque secundário */
  --accent-foreground: var(--light-card);  /* Texto sobre elementos de destaque */
  
  /* Elementos destrutivos (botões de exclusão, alertas de erro) */
  --destructive: #ef4444;                  /* Vermelho para ações destrutivas */
  --destructive-foreground: var(--light-card); /* Texto sobre elementos destrutivos */
  
  /* Bordas, campos de entrada e foco */
  --border: var(--light-border);           /* Cor das bordas */
  --input: var(--light-border);            /* Cor dos campos de entrada */
  --ring: var(--primary-color-light);      /* Cor do anel de foco (outline) */
}

/**
 * Tema Escuro
 * Definições de todas as variáveis CSS para o tema escuro
 */
.dark {
  /* Cores de fundo e texto */
  --background: var(--dark-bg);            /* Fundo principal da página */
  --foreground: var(--dark-text);          /* Texto principal */
  
  /* Elementos de cartão */
  --card: var(--dark-card);                /* Fundo dos cartões/painéis */
  --card-foreground: var(--dark-text);     /* Texto dentro dos cartões */
  
  /* Elementos de popover (tooltips, menus suspensos) */
  --popover: var(--dark-bg);               /* Fundo de popovers */
  --popover-foreground: var(--dark-text);  /* Texto dentro de popovers */
  
  /* Elementos primários (botões principais, links, etc) */
  --primary: var(--primary-color);         /* Cor principal - ciano brilhante no tema escuro */
  --primary-foreground: var(--dark-bg);    /* Texto sobre elementos primários - escuro para contraste */
  
  /* Elementos secundários (botões alternativos, etc) */
  --secondary: var(--secondary-color);     /* Cor secundária */
  --secondary-foreground: var(--dark-text); /* Texto sobre elementos secundários */
  
  /* Elementos atenuados (textos menos importantes, áreas desabilitadas) */
  --muted: var(--dark-card);               /* Fundo para áreas atenuadas */
  --muted-foreground: #a1a1aa;             /* Texto atenuado - cinza médio */
  
  /* Elementos de destaque (menos proeminentes que primários) */
  --accent: var(--accent-color);           /* Cor de destaque secundário */
  --accent-foreground: var(--dark-text);   /* Texto sobre elementos de destaque */
  
  /* Elementos destrutivos (botões de exclusão, alertas de erro) */
  --destructive: #ff5757;                  /* Vermelho para ações destrutivas - mais brilhante no tema escuro */
  --destructive-foreground: #f8f8f8;       /* Texto sobre elementos destrutivos */
  
  /* Bordas, campos de entrada e foco */
  --border: var(--dark-border);            /* Cor das bordas */
  --input: var(--dark-border);             /* Cor dos campos de entrada */
  --ring: var(--primary-color);            /* Cor do anel de foco (outline) */
}