/**
 * ============================================================================
 * PALETA DE CORES - DESIGN SYSTEM SIDASP
 * ============================================================================
 *
 * Este é o arquivo FONTE DA VERDADE para todas as cores do design system.
 * Todas as cores devem ser definidas aqui e referenciadas em variables.css
 *
 * IMPORTANTE:
 * - Este arquivo contém apenas os tokens primitivos (cores brutas)
 * - As cores semânticas (--color-primary, --color-danger, etc) ficam em variables.css
 * - Qualquer atualização de cor deve ser feita AQUI primeiro
 *
 * @version 2.0.0
 * @date 2025-11-08
 * @updated Projeto Novo - Cores Atualizadas
 */

:root {
  /* ============================================================================
     ACCENT - AZUL (Primary)
     ============================================================================ */

  --blue-500: #001D32;    /* Azul mais escuro */
  --blue-400: #0A4F88;    /* Azul escuro (cor antiga do primary) */
  --blue-300: #3E68FB;    /* Azul vibrante - COR PRINCIPAL ATUAL */
  --blue-200: #92BFFC;    /* Azul claro */
  --blue-100: #ECEDF2;    /* Azul muito claro */

  /* ============================================================================
     GREEN - VERDE (Success)
     ============================================================================ */

  --green-600: #2D470A;   /* Verde muito escuro - Texto success dark */
  --green-500: #1A4D00;   /* Verde escuro */
  --green-400: #4D933A;   /* Verde médio escuro */
  --green-300: #519000;   /* Verde vibrante - COR DE SUCESSO ATUAL */
  --green-200: #74C137;   /* Verde claro */
  --green-100: #DDE4D2;   /* Verde muito claro - Fundo success light */

  /* ============================================================================
     YELLOW - AMARELO (Warning)
     ============================================================================ */

  --yellow-600: #3B2E02;  /* Amarelo muito escuro - Texto warning dark */
  --yellow-500: #5E4502;  /* Amarelo escuro */
  --yellow-450: #9F7C04;  /* Amarelo médio - Ícones warning */
  --yellow-400: #C89B00;  /* Amarelo médio escuro */
  --yellow-300: #E9BD00;  /* Amarelo vibrante - COR DE ALERTA ATUAL */
  --yellow-200: #E7BD2C;  /* Amarelo claro */
  --yellow-100: #F0E5C1;  /* Amarelo muito claro - Fundo warning light */

  /* ============================================================================
     RED - VERMELHO (Danger/Error)
     ============================================================================ */

  --red-500: #970707;     /* Vermelho muito escuro - Texto danger dark */
  --red-400: #C90A0A;     /* Vermelho médio - COR DE PERIGO ATUAL (botões) */
  --red-300: #DF3F48;     /* Vermelho vibrante */
  --red-200: #F49999;     /* Vermelho claro */
  --red-100: #F9E1E1;     /* Vermelho muito claro - Fundo danger light */

  /* ============================================================================
     NEUTRAL - TONS DE CINZA (Greyscale)
     ============================================================================ */

  --neutral-800: #12151F; /* Preto suave - Texto principal */
  --neutral-700: #1D2333; /* Cinza muito escuro */
  --neutral-600: #394360; /* Cinza escuro - Texto secundário */
  --neutral-500: #7A839F; /* Cinza médio - Texto muted */
  --neutral-450: #CDD1DB; /* Cinza médio claro - Tags/badges */
  --neutral-400: #CED3E2; /* Cinza claro - Bordas */
  --neutral-300: #ECEDF2; /* Cinza muito claro - Fundos secundários */
  --neutral-200: #ECEDF2; /* Cinza ultraclaro */
  --neutral-100: #F6F6F9; /* Quase branco - Fundo principal */

  /* ============================================================================
     SPECIAL - CORES ESPECIAIS
     ============================================================================ */

  --white: #FFFFFF;       /* Branco puro */
  --black: #000000;       /* Preto puro */
}

/* ============================================================================
   DARK MODE - AJUSTES DE PALETA
   ============================================================================ */

.dark,
.dark-mode,
[data-theme="dark"] {
  /* ACCENT - AZUL (Dark Mode) */
  --blue-500: #10141D;    /* Azul mais escuro (quase preto) */
  --blue-400: #013251;    /* Azul escuro */
  --blue-300: #4D91F5;    /* Azul vibrante (mais claro no dark) */
  --blue-200: #8CAFFA;    /* Azul claro */
  --blue-100: #F1F4FE;    /* Azul muito claro */

  /* GREEN - VERDE (Dark Mode) */
  --green-600: #1B2C2B;   /* Verde muito escuro - Fundo success dark */
  --green-500: #133D00;   /* Verde escuro */
  --green-400: #4D5F27;   /* Verde médio escuro */
  --green-300: #519000;   /* Verde vibrante (mantém) */
  --green-200: #B3D684;   /* Verde claro - Texto success light */
  --green-100: #DDE4D2;   /* Verde muito claro */

  /* YELLOW - AMARELO (Dark Mode) */
  --yellow-600: #242622;  /* Amarelo muito escuro - Fundo warning dark */
  --yellow-500: #3C2020;  /* Amarelo escuro */
  --yellow-450: #EFD371;  /* Amarelo médio - Texto warning light */
  --yellow-400: #C09F27;  /* Amarelo médio escuro */
  --yellow-300: #E9BD00;  /* Amarelo vibrante (mantém) */
  --yellow-200: #F7BD2C;  /* Amarelo claro */
  --yellow-100: #F0E5C1;  /* Amarelo muito claro */

  /* RED - VERMELHO (Dark Mode) */
  --red-500: #970707;     /* Vermelho muito escuro */
  --red-400: #CC2727;     /* Vermelho médio - Botões danger dark */
  --red-300: #DD3C3D;     /* Vermelho vibrante */
  --red-200: #F49999;     /* Vermelho claro - Texto danger light */
  --red-100: #FDEBEB;     /* Vermelho muito claro - Texto/ícones danger */

  /* NEUTRAL - TONS DE CINZA (Dark Mode) */
  --neutral-800: #10141D; /* Preto suave (fundo dark) */
  --neutral-750: #141926; /* Preto suave variant - Fundo dark secondary */
  --neutral-700: #1D2333; /* Cinza muito escuro - Containers */
  --neutral-650: #212533; /* Cinza muito escuro variant - Borders */
  --neutral-600: #2A2F41; /* Cinza escuro - Borders principais */
  --neutral-550: #394360; /* Cinza escuro - Texto secundário */
  --neutral-500: #7A839F; /* Cinza médio - Texto muted */
  --neutral-450: #A2A8B9; /* Cinza médio claro - Texto variant */
  --neutral-400: #BFC3CF; /* Cinza claro - Secondary text variant */
  --neutral-300: #E0E2EB; /* Cinza muito claro - Texto principal dark mode */
  --neutral-200: #858CA3; /* Cinza ultraclaro */
  --neutral-100: #10141D; /* Quase preto (fundo dark) */
}

/* Preferência do sistema para dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* ACCENT - AZUL (Dark Mode) */
    --blue-500: #10141D;
    --blue-400: #013251;
    --blue-300: #4D91F5;
    --blue-200: #8CAFFA;
    --blue-100: #F1F4FE;

    /* GREEN - VERDE (Dark Mode) */
    --green-600: #1B2C2B;
    --green-500: #133D00;
    --green-400: #4D5F27;
    --green-300: #519000;
    --green-200: #B3D684;
    --green-100: #DDE4D2;

    /* YELLOW - AMARELO (Dark Mode) */
    --yellow-600: #242622;
    --yellow-500: #3C2020;
    --yellow-450: #EFD371;
    --yellow-400: #C09F27;
    --yellow-300: #E9BD00;
    --yellow-200: #F7BD2C;
    --yellow-100: #F0E5C1;

    /* RED - VERMELHO (Dark Mode) */
    --red-500: #970707;
    --red-400: #CC2727;
    --red-300: #DD3C3D;
    --red-200: #F49999;
    --red-100: #FDEBEB;

    /* NEUTRAL - TONS DE CINZA (Dark Mode) */
    --neutral-800: #10141D;
    --neutral-750: #141926;
    --neutral-700: #1D2333;
    --neutral-650: #212533;
    --neutral-600: #2A2F41;
    --neutral-550: #394360;
    --neutral-500: #7A839F;
    --neutral-450: #A2A8B9;
    --neutral-400: #BFC3CF;
    --neutral-300: #E0E2EB;
    --neutral-200: #858CA3;
    --neutral-100: #10141D;
  }
}

/* ============================================================================
   GUIA DE USO
   ============================================================================

   Este arquivo define APENAS as cores brutas da paleta.
   Para usar as cores nos componentes, use as variáveis semânticas em variables.css:

   ✅ CORRETO:
   color: var(--color-primary);        // Usa a cor semântica
   color: var(--color-danger);         // Usa a cor semântica

   ❌ INCORRETO:
   color: var(--blue-300);             // Não use cores brutas diretamente
   color: #3E68FB;                     // Não use HEX diretamente

   EXCEÇÃO:
   Apenas em variables.css você pode referenciar as cores brutas para criar
   as cores semânticas:
   --color-primary: var(--blue-300);

   ============================================================================ */