/*
|--------------------------------------------------------------------------
| THEME FILE - TOKENS & COLORS ONLY
|--------------------------------------------------------------------------
| This file controls:
| - Color variables
| - Typography scale
| - Theme definitions
|
| Do NOT add layout rules here.
|--------------------------------------------------------------------------
*/

/**
 * DESIGN SYSTEM - THEME: BLUE (CORPORATIVO)
 * 
 * Tema azul profissional que sobrescreve variáveis CSS base.
 * Este arquivo APENAS sobrescreve variáveis já existentes em variables.css.
 * Nenhuma tela existente é afetada até que o tema seja explicitamente ativado.
 * 
 * Paleta de Cores:
 * - Primária: Azul corporativo (50-900)
 * - Secundária: Azul claro/escuro
 * - Semânticas: Sucesso, Erro, Aviso, Informação (alinhadas ao azul)
 * 
 * @version 1.0.0
 * @created 2026-01-30
 * @author Design System Team
 */

:root {
   /* ============================================
     CORES PRIMÁRIAS - AZUL CORPORATIVO
     ============================================ */

   /* Azul Corporativo - Escala Completa (50-900) */
   --color-primary-50: #eff6ff;
   --color-primary-100: #dbeafe;
   --color-primary-200: #bfdbfe;
   --color-primary-300: #93c5fd;
   --color-primary-400: #60a5fa;
   --color-primary-500: #3b82f6;
   --color-primary-600: #2563eb;
   --color-primary-700: #1d4ed8;
   --color-primary-800: #1e40af;
   --color-primary-900: #1e3a8a;

   /* Azul Corporativo - Variações Semânticas */
   --color-primary-light: #60a5fa;
   /* Hover/Light */
   --color-primary-dark: #1d4ed8;
   /* Active/Dark */
   --color-primary-accent: #2563eb;
   /* Accent/Default */

   /* ============================================
     CORES SECUNDÁRIAS - AZUL COMPLEMENTAR
     ============================================ */

   /* Azul Claro/Escuro para Secundária */
   --color-secondary-50: #f0f9ff;
   --color-secondary-100: #e0f2fe;
   --color-secondary-200: #bae6fd;
   --color-secondary-300: #7dd3fc;
   --color-secondary-400: #38bdf8;
   --color-secondary-500: #0ea5e9;
   --color-secondary-600: #0284c7;
   --color-secondary-700: #0369a1;
   --color-secondary-800: #0c5460;
   --color-secondary-900: #0c4a6e;

   /* ============================================
     CORES SEMÂNTICAS - ALINHADAS AO AZUL
     ============================================ */

   /* Sucesso - Verde (mantém semântica visual) */
   --color-success-50: #f0fdf4;
   --color-success-100: #dcfce7;
   --color-success-200: #bbf7d0;
   --color-success-300: #86efac;
   --color-success-400: #4ade80;
   --color-success-500: #22c55e;
   --color-success-600: #16a34a;
   --color-success-700: #15803d;
   --color-success-800: #166534;
   --color-success-900: #145231;

   /* Erro - Vermelho (mantém semântica visual) */
   --color-error-50: #fef2f2;
   --color-error-100: #fee2e2;
   --color-error-200: #fecaca;
   --color-error-300: #fca5a5;
   --color-error-400: #f87171;
   --color-error-500: #ef4444;
   --color-error-600: #dc2626;
   --color-error-700: #b91c1c;
   --color-error-800: #991b1b;
   --color-error-900: #7f1d1d;

   /* Aviso - Âmbar (alinhado ao azul corporativo) */
   --color-warning-50: #fffbeb;
   --color-warning-100: #fef3c7;
   --color-warning-200: #fde68a;
   --color-warning-300: #fcd34d;
   --color-warning-400: #fbbf24;
   --color-warning-500: #f59e0b;
   --color-warning-600: #d97706;
   --color-warning-700: #b45309;
   --color-warning-800: #92400e;
   --color-warning-900: #78350f;

   /* Informação - Azul (alinhado ao tema) */
   --color-info-50: #eff6ff;
   --color-info-100: #dbeafe;
   --color-info-200: #bfdbfe;
   --color-info-300: #93c5fd;
   --color-info-400: #60a5fa;
   --color-info-500: #3b82f6;
   --color-info-600: #2563eb;
   --color-info-700: #1d4ed8;
   --color-info-800: #1e40af;
   --color-info-900: #1e3a8a;

   /* ============================================
     CORES DE FUNDO - ALINHADAS AO AZUL
     ============================================ */

   --color-background-primary: #ffffff;
   --color-background-secondary: #f8fafc;
   --color-background-tertiary: #f1f5f9;

   /* ============================================
     CORES DE TEXTO - ALINHADAS AO AZUL
     ============================================ */

   --color-text-primary: #0f172a;
   --color-text-secondary: #475569;
   --color-text-tertiary: #94a3b8;
   --color-text-inverse: #ffffff;

   /* ============================================
     CORES NEUTRAS - ESCALA CINZA ALINHADA
     ============================================ */

   --color-neutral-50: #f9fafb;
   --color-neutral-100: #f3f4f6;
   --color-neutral-200: #e5e7eb;
   --color-neutral-300: #d1d5db;
   --color-neutral-400: #9ca3af;
   --color-neutral-500: #6b7280;
   --color-neutral-600: #4b5563;
   --color-neutral-700: #374151;
   --color-neutral-800: #1f2937;
   --color-neutral-900: #111827;

   /* ============================================
     CORES DE BORDA - ALINHADAS AO AZUL
     ============================================ */

   --border-color: #e2e8f0;
   --border-color-light: #f1f5f9;
   --border-color-dark: #cbd5e1;

   /* ============================================
     VARIAÇÕES DE HOVER/ACTIVE
     ============================================ */

   /* Hover - Azul mais claro */
   --color-hover: #60a5fa;
   --color-hover-bg: #eff6ff;

   /* Active - Azul mais escuro */
   --color-active: #1d4ed8;
   --color-active-bg: #dbeafe;

   /* Focus - Azul com transparência */
   --color-focus: #2563eb;
   --color-focus-ring: rgba(37, 99, 235, 0.1);

   /* ============================================
     GRADIENTES - TEMA AZUL
     ============================================ */

   --gradient-primary: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
   --gradient-primary-light: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
   --gradient-primary-dark: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
   --gradient-accent: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);

   /* ============================================
     SOMBRAS - ALINHADAS AO AZUL
     ============================================ */

   --shadow-none: none;
   --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
   --shadow-base: 0 1px 3px 0 rgba(15, 23, 42, 0.1), 0 1px 2px 0 rgba(15, 23, 42, 0.06);
   --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.1), 0 2px 4px -1px rgba(15, 23, 42, 0.06);
   --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -2px rgba(15, 23, 42, 0.05);
   --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 10px 10px -5px rgba(15, 23, 42, 0.04);
   --shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.25);

   /* Sombra com cor azul */
   --shadow-blue-sm: 0 1px 2px 0 rgba(37, 99, 235, 0.05);
   --shadow-blue-md: 0 4px 6px -1px rgba(37, 99, 235, 0.1), 0 2px 4px -1px rgba(37, 99, 235, 0.06);
   --shadow-blue-lg: 0 10px 15px -3px rgba(37, 99, 235, 0.15), 0 4px 6px -2px rgba(37, 99, 235, 0.05);

   /* ============================================
     TRANSIÇÕES - TEMA AZUL
     ============================================ */

   --transition-fast: 150ms ease-in-out;
   --transition-base: 200ms ease-in-out;
   --transition-slow: 300ms ease-in-out;
   --transition-slower: 500ms ease-in-out;

   /* ============================================
     Z-INDEX - MANTÉM PADRÃO
     ============================================ */

   --z-index-hide: -1;
   --z-index-auto: auto;
   --z-index-base: 0;
   --z-index-dropdown: 1000;
   --z-index-sticky: 1020;
   --z-index-fixed: 1030;
   --z-index-modal-backdrop: 1040;
   --z-index-modal: 1050;
   --z-index-popover: 1060;
   --z-index-tooltip: 1070;

   /* ============================================
     VARIÁVEIS ADICIONAIS - TEMA AZUL
     ============================================ */

   /* Cor de destaque */
   --color-highlight: #3b82f6;
   --color-highlight-light: #dbeafe;

   /* Cor de sucesso com toque azul */
   --color-success-primary: #22c55e;

   /* Cor de erro com toque azul */
   --color-error-primary: #ef4444;

   /* Cor de aviso com toque azul */
   --color-warning-primary: #f59e0b;

   /* Cor de informação (azul) */
   --color-info-primary: #3b82f6;

   /* ============================================
     PALETA ESTENDIDA - TONS AZUIS
     ============================================ */

   /* Azul Sky (Céu) */
   --color-sky-50: #f0f9ff;
   --color-sky-100: #e0f2fe;
   --color-sky-200: #bae6fd;
   --color-sky-300: #7dd3fc;
   --color-sky-400: #38bdf8;
   --color-sky-500: #0ea5e9;
   --color-sky-600: #0284c7;
   --color-sky-700: #0369a1;
   --color-sky-800: #0c5460;
   --color-sky-900: #0c4a6e;

   /* Azul Slate (Ardósia) */
   --color-slate-50: #f8fafc;
   --color-slate-100: #f1f5f9;
   --color-slate-200: #e2e8f0;
   --color-slate-300: #cbd5e1;
   --color-slate-400: #94a3b8;
   --color-slate-500: #64748b;
   --color-slate-600: #475569;
   --color-slate-700: #334155;
   --color-slate-800: #1e293b;
   --color-slate-900: #0f172a;

   /* ============================================
     NOTAS IMPORTANTES
     ============================================ */

   /*
   * Este arquivo APENAS sobrescreve variáveis CSS.
   * Nenhuma classe é modificada.
   * Nenhum elemento HTML é afetado.
   * O tema é aplicado apenas quando explicitamente ativado.
   * 
   * Para ativar o tema em uma página:
   * <link rel="stylesheet" href="assets/css/app.css">
   * <link rel="stylesheet" href="assets/css/themes/theme-blue.css">
   * 
   * Para desativar: remova a segunda linha.
   * 
   * Compatibilidade: 100% com navegadores modernos
   * Fallback: Variáveis CSS padrão do navegador
   */
}