/**
 * Theme Variables - Sistema de Cores Aprimorado
 * Hedah 2.0 - Design System
 */

[data-theme="dark"] {
  /* ========================================
     CORES PRINCIPAIS - Dark Theme (Padrão)
     ======================================== */

  /* Backgrounds */
  --bg: #0D1117;
  --bg-secondary: #161B22;
  --surface: #1C2333;
  --surface-hover: #22304A;
  --panel: #1C2333;
  --panel-hover: #22304A;
  --card: #161D2F;
  --hover: #1E2740;

  /* Textos */
  --text: #F1F5F9;
  --text-secondary: #CBD5E1;
  --muted: #CBD5E1;
  --text-muted: #94A3B8;
  --muted-light: #64748B;

  /* Bordas e Sombras */
  --border: #1E293B;
  --border-light: #334155;
  --border-strong: #334155;
  --shadow: rgba(10, 18, 32, 0.22);
  --shadow-lg: rgba(10, 18, 32, 0.32);

  /* Inputs */
  --input-bg: #1A2137;
  --input-border: #334155;
  --input-focus: #60A5FA;

  /* Overlays */
  --hover-overlay: rgba(96, 165, 250, 0.12);
  --active-overlay: rgba(96, 165, 250, 0.18);
  --primary-bg: rgba(96, 165, 250, 0.14);
  --success-bg: rgba(52, 211, 153, 0.14);
  --warning-bg: rgba(251, 191, 36, 0.14);
  --danger-bg: rgba(248, 113, 113, 0.14);
  --info-bg: rgba(34, 211, 238, 0.14);

  /* ========================================
     CORES DE AÇÃO - Brand Colors
     ======================================== */

  /* Primary (Blue) */
  --primary: #60A5FA;
  --primary-rgb: 96, 165, 250;
  --primary-hover: #3B82F6;
  --primary-dark: #2563EB;
  --primary-light: #93C5FD;

  /* Success (Green) */
  --success: #34D399;
  --success-hover: #10B981;
  --success-dark: #059669;
  --success-light: #6EE7B7;

  /* Warning (Yellow/Orange) */
  --warning: #FBBF24;
  --warning-hover: #F59E0B;
  --warning-dark: #D97706;
  --warning-light: #FCD34D;

  /* Danger (Red) */
  --danger: #F87171;
  --danger-hover: #EF4444;
  --danger-dark: #DC2626;
  --danger-light: #FCA5A5;

  /* Info (Cyan) */
  --info: #22D3EE;
  --info-hover: #06B6D4;
  --info-dark: #0891B2;
  --info-light: #67E8F9;

  /* ========================================
     CORES ADICIONAIS
     ======================================== */

  /* Purple */
  --purple: #A78BFA;
  --purple-hover: #8B5CF6;

  /* Pink */
  --pink: #F472B6;
  --pink-hover: #EC4899;

  /* Orange */
  --orange: #FB923C;
  --orange-hover: #F97316;

  /* ========================================
     CORES DE ACENTO LEGADAS
     Mantem os nomes antigos, mas agora usa cores solidas.
     ======================================== */

  --gradient-primary: #3B82F6;
  --gradient-success: #10B981;
  --gradient-danger: #EF4444;
  --gradient-warning: #F59E0B;
  --gradient-purple: #8B5CF6;
  --gradient-sunset: #FEF3C7;
  --gradient-ocean: #EFF6FF;

}

:root {
  /* ========================================
     VARIÁVEIS COMPARTILHADAS (ESPAÇAMENTOS, TIPOGRAFIA, ETC)
     ======================================== */
  /* ========================================
     ESPAÇAMENTOS
     ======================================== */

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* ========================================
     RAIOS DE BORDA
     ======================================== */

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 14px;
  --radius-full: 9999px;

  /* ========================================
     TRANSIÇÕES
     ======================================== */

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 400ms cubic-bezier(0.16, 1, 0.3, 1);

}

[data-theme="dark"] {
  /* ========================================
     SOMBRAS
     ======================================== */

  --shadow-sm: 0 1px 2px rgba(10, 18, 32, 0.14);
  --shadow-md: 0 10px 24px rgba(10, 18, 32, 0.18);
  --shadow-lg: 0 16px 36px rgba(10, 18, 32, 0.22);
  --shadow-xl: 0 24px 56px rgba(10, 18, 32, 0.26);
  --shadow-2xl: 0 32px 72px rgba(10, 18, 32, 0.30);

  /* Shadow Colors */
  --shadow-primary: 0 8px 20px rgba(96, 165, 250, 0.18);
  --shadow-success: 0 8px 20px rgba(52, 211, 153, 0.16);
  --shadow-danger: 0 8px 20px rgba(248, 113, 113, 0.16);
  --shadow-warning: 0 8px 20px rgba(251, 191, 36, 0.16);
}

:root {

  /* ========================================
     Z-INDEX LAYERS
     ======================================== */

  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* ========================================
     TIPOGRAFIA
     ======================================== */

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Fira Code', 'SF Mono', Monaco, Consolas, 'Courier New', monospace;

  --text-xs: 13px;
  --text-sm: 14px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 19px;
  --text-2xl: 25px;
  --text-3xl: 31px;
  --text-4xl: 37px;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 500;
  --font-bold: 500;
  --font-extrabold: 500;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
}

/* ========================================
   LIGHT THEME - Tema Claro
   ======================================== */

:root {
  /* Backgrounds */
  --bg: #F5F7FB;
  --bg-secondary: #EEF2F7;
  --surface: #FFFFFF;
  --surface-hover: #F8F9FD;
  --panel: #FFFFFF;
  --panel-hover: #F1F5F9;
  --card: #FFFFFF;
  --hover: #F0F5FB;

  /* Textos */
  --text: #1E293B;
  --text-secondary: #475569;
  --muted: #64748B;
  --text-muted: #94A3B8;
  --muted-light: #94A3B8;

  /* Bordas e Sombras */
  --border: #E1E7EF;
  --border-light: #EEF2F7;
  --border-strong: #C9D4E2;
  --shadow: rgba(43, 48, 58, 0.08);
  --shadow-lg: rgba(43, 48, 58, 0.12);

  /* Inputs */
  --input-bg: #FFFFFF;
  --input-border: #E2E8F0;
  --input-focus: #3B82F6;

  /* Overlays */
  --hover-overlay: rgba(59, 130, 246, 0.08);
  --active-overlay: rgba(59, 130, 246, 0.12);
  --primary-bg: rgba(59, 130, 246, 0.1);
  --success-bg: rgba(16, 185, 129, 0.1);
  --warning-bg: rgba(245, 158, 11, 0.12);
  --danger-bg: rgba(239, 68, 68, 0.1);
  --info-bg: rgba(6, 182, 212, 0.1);

  /* Primary (Blue - mesmo do dark) */
  --primary: #3B82F6;
  --primary-rgb: 59, 130, 246;
  --primary-hover: #2563EB;
  --primary-dark: #1D4ED8;
  --primary-light: #60A5FA;

  /* Success (Green) */
  --success: #10B981;
  --success-hover: #059669;
  --success-dark: #047857;
  --success-light: #34D399;

  /* Warning (Amber) */
  --warning: #F59E0B;
  --warning-hover: #D97706;
  --warning-dark: #B45309;
  --warning-light: #FBBF24;

  /* Danger (Red) */
  --danger: #EF4444;
  --danger-hover: #DC2626;
  --danger-dark: #B91C1C;
  --danger-light: #F87171;

  /* Info (Cyan) */
  --info: #06B6D4;
  --info-hover: #0891B2;
  --info-dark: #0E7490;
  --info-light: #22D3EE;

  /* Sombras Light Theme */
  --shadow-sm: 0 1px 2px rgba(43, 48, 58, 0.05);
  --shadow-md: 0 10px 26px rgba(43, 48, 58, 0.07);
  --shadow-lg: 0 16px 38px rgba(43, 48, 58, 0.09);
  --shadow-xl: 0 24px 54px rgba(43, 48, 58, 0.11);
  --shadow-2xl: 0 32px 72px rgba(43, 48, 58, 0.13);

  /* Shadow Colors Light */
  --shadow-primary: 0 8px 18px rgba(59, 130, 246, 0.16);
  --shadow-success: 0 8px 18px rgba(16, 185, 129, 0.14);
  --shadow-danger: 0 8px 18px rgba(239, 68, 68, 0.14);
  --shadow-warning: 0 8px 18px rgba(245, 158, 11, 0.14);

  /* Cores de acento legadas */
  --gradient-primary: #3B82F6;
  --gradient-success: #10B981;
  --gradient-danger: #EF4444;
  --gradient-warning: #F59E0B;
  --gradient-sunset: #FFF7ED;
  --gradient-ocean: #EFF6FF;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Text Colors */
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.text-muted { color: var(--muted); }

/* Background Colors */
.bg-primary { background: var(--primary); }
.bg-success { background: var(--success); }
.bg-warning { background: var(--warning); }
.bg-danger { background: var(--danger); }
.bg-panel { background: var(--panel); }

/* Border Colors */
.border-primary { border-color: var(--primary); }
.border-success { border-color: var(--success); }
.border-warning { border-color: var(--warning); }
.border-danger { border-color: var(--danger); }

/* Gradients */
.gradient-primary { background: var(--gradient-primary); }
.gradient-success { background: var(--gradient-success); }
.gradient-danger { background: var(--gradient-danger); }
.gradient-sunset { background: var(--gradient-sunset); }
.gradient-ocean { background: var(--gradient-ocean); }