/**
 * DESIGN SYSTEM - Variáveis CSS Centralizadas
 * FASE 1.2 - Sistema de Design Completo
 *
 * Este arquivo define TODAS as variáveis CSS do projeto
 * Migrar valores hardcoded para estas variáveis progressivamente
 */

:root {
   /* ===================================================================
     CORES PRIMÁRIAS
     =================================================================== */

   --primary-color: #0077be;
   --primary-dark: #005a8f;
   --primary-light: #3399cc;

   --secondary-color: #00a86b;
   --secondary-dark: #007a4f;
   --secondary-light: #33c185;

   --accent-color: #ff6b35;
   --accent-dark: #e55524;
   --accent-light: #ff8c5f;

   /* ===================================================================
     CORES DE ESTADO (Semantic Colors)
     =================================================================== */

   --color-success: #10b981;
   --color-success-dark: #059669;
   --color-success-light: #34d399;

   --color-warning: #fbbf24;
   --color-warning-dark: #f59e0b;
   --color-warning-light: #fcd34d;

   --color-danger: #ef4444;
   --color-danger-dark: #dc2626;
   --color-danger-light: #f87171;

   --color-info: #4285f4;
   --color-info-dark: #1967d2;
   --color-info-light: #669df6;

   /* ===================================================================
     CORES NEUTRAS
     =================================================================== */

   --bg-color: #f5f7fa;
   --surface-color: #ffffff;
   --background-color: #f9fafb;

   --text-primary: #1a1a1a;
   --text-secondary: #666666;
   --text-tertiary: #999999;
   --text-disabled: #cccccc;

   --border-color: #e0e0e0;
   --border-color-light: #f0f0f0;
   --border-color-dark: #cccccc;

   --overlay-color: rgba(0, 0, 0, 0.5);
   --overlay-light: rgba(0, 0, 0, 0.3);
   --overlay-dark: rgba(0, 0, 0, 0.7);

   /* ===================================================================
     GRADIENTES
     =================================================================== */

   --gradient-primary: linear-gradient(135deg, #0077be 0%, #00a86b 100%);
   --gradient-secondary: linear-gradient(135deg, #4caf50, #66bb6a);
   --gradient-hero: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
   --gradient-success: linear-gradient(135deg, #10b981, #059669);
   --gradient-danger: linear-gradient(135deg, #ef4444, #dc2626);
   --gradient-info: linear-gradient(135deg, #4285f4, #1967d2);

   /* ===================================================================
     ESPAÇAMENTOS (8pt Grid System)
     =================================================================== */

   --spacing-xs: 0.25rem;
   /* 4px */
   --spacing-sm: 0.5rem;
   /* 8px */
   --spacing-md: 1rem;
   /* 16px */
   --spacing-lg: 1.5rem;
   /* 24px */
   --spacing-xl: 2rem;
   /* 32px */
   --spacing-2xl: 3rem;
   /* 48px */
   --spacing-3xl: 4rem;
   /* 64px */
   --spacing-4xl: 6rem;
   /* 96px */

   /* Padding específicos para componentes */
   --padding-btn: 0.75rem 1.5rem;
   --padding-btn-sm: 0.5rem 1rem;
   --padding-btn-lg: 1rem 2rem;
   --padding-card: var(--spacing-md);
   --padding-card-lg: var(--spacing-lg);
   --padding-modal: 1.5rem;

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

   /* Font Families */
   --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-display: 'Poppins', sans-serif;
   --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;

   /* Font Sizes (Type Scale - Minor Third 1.200) */
   --font-size-xs: 0.75rem;
   /* 12px */
   --font-size-sm: 0.875rem;
   /* 14px */
   --font-size-base: 1rem;
   /* 16px */
   --font-size-lg: 1.125rem;
   /* 18px */
   --font-size-xl: 1.25rem;
   /* 20px */
   --font-size-2xl: 1.5rem;
   /* 24px */
   --font-size-3xl: 2rem;
   /* 32px */
   --font-size-4xl: 2.5rem;
   /* 40px */
   --font-size-5xl: 3rem;
   /* 48px */

   /* Font Weights */
   --font-weight-light: 300;
   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;

   /* Line Heights */
   --line-height-tight: 1.25;
   --line-height-normal: 1.5;
   --line-height-relaxed: 1.75;
   --line-height-loose: 2;

   /* ===================================================================
     BORDAS E RAIOS
     =================================================================== */

   --border-width-thin: 1px;
   --border-width-base: 2px;
   --border-width-thick: 3px;

   --border-radius-sm: 4px;
   --border-radius-md: 8px;
   --border-radius-lg: 12px;
   --border-radius-xl: 16px;
   --border-radius-2xl: 24px;
   --border-radius-full: 9999px;

   /* Aliases semânticos */
   --radius-sm: var(--border-radius-sm);
   --radius-md: var(--border-radius-md);
   --radius-lg: var(--border-radius-lg);
   --radius-xl: var(--border-radius-xl);
   --radius-full: var(--border-radius-full);

   /* ===================================================================
     SOMBRAS (Elevação)
     =================================================================== */

   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
   --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
   --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
   --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.18);
   --shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.25);

   /* Sombras de foco */
   --shadow-focus-primary: 0 0 0 3px rgba(0, 119, 190, 0.3);
   --shadow-focus-danger: 0 0 0 3px rgba(239, 68, 68, 0.3);
   --shadow-focus-success: 0 0 0 3px rgba(16, 185, 129, 0.3);

   /* ===================================================================
     TRANSIÇÕES E ANIMAÇÕES
     =================================================================== */

   --transition-fast: 150ms ease-in-out;
   --transition-base: 250ms ease-in-out;
   --transition-slow: 350ms ease-in-out;
   --transition-slowest: 500ms ease-in-out;

   /* Timings específicos */
   --duration-instant: 100ms;
   --duration-fast: 200ms;
   --duration-base: 300ms;
   --duration-slow: 500ms;

   /* Easing functions */
   --ease-linear: linear;
   --ease-in: cubic-bezier(0.4, 0, 1, 1);
   --ease-out: cubic-bezier(0, 0, 0.2, 1);
   --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

   /* ===================================================================
     Z-INDEX (Camadas de Elevação)
     =================================================================== */

   --z-base: 0;
   --z-dropdown: 1000;
   --z-sticky: 1020;
   --z-fixed: 1030;
   --z-modal-backdrop: 9000;
   --z-modal: 9001;
   --z-modal-close: 9002;
   --z-popover: 9100;
   --z-tooltip: 9200;
   --z-notification: 9300;

   /* Exceção documentada para modal de localização */
   --z-location-modal: 10000;

   /* ===================================================================
     DIMENSÕES E LAYOUT
     =================================================================== */

   /* Altura de componentes fixos */
   --header-height: 85px;
   --navbar-height: 52px;
   --footer-height: 200px;

   /* Larguras máximas de containers */
   --container-xs: 480px;
   --container-sm: 640px;
   --container-md: 768px;
   --container-lg: 1024px;
   --container-xl: 1200px;
   --container-2xl: 1440px;

   /* Larguras de inputs/componentes */
   --input-height-sm: 32px;
   --input-height-base: 40px;
   --input-height-lg: 48px;

   /* ===================================================================
     BREAKPOINTS (Para uso em JS)
     =================================================================== */

   --breakpoint-sm: 640px;
   --breakpoint-md: 768px;
   --breakpoint-lg: 1024px;
   --breakpoint-xl: 1280px;
   --breakpoint-2xl: 1536px;

   /* ===================================================================
     COMPONENTES ESPECÍFICOS
     =================================================================== */

   /* Botões */
   --btn-height-sm: 32px;
   --btn-height-base: 40px;
   --btn-height-lg: 48px;

   /* Cards */
   --card-padding: var(--spacing-md);
   --card-padding-lg: var(--spacing-lg);
   --card-border-radius: var(--radius-lg);

   /* Modals */
   --modal-max-width: 800px;
   --modal-max-width-lg: 1000px;
   --modal-max-width-xl: 1200px;
   --modal-padding: var(--spacing-xl);
   --modal-backdrop-blur: 6px;

   /* Inputs */
   --input-padding: 0.75rem 1rem;
   --input-padding-sm: 0.5rem 0.75rem;
   --input-padding-lg: 1rem 1.25rem;
   --input-border-width: 2px;
   --input-border-color: var(--border-color);
   --input-border-color-focus: var(--primary-color);
   --input-border-radius: var(--radius-md);

   /* Badges */
   --badge-padding: 0.25rem 0.75rem;
   --badge-border-radius: var(--radius-full);
   --badge-font-size: var(--font-size-xs);

   /* Toasts/Notificações */
   --toast-width: 400px;
   --toast-padding: var(--spacing-md) var(--spacing-lg);
   --toast-border-radius: var(--radius-md);

   /* QCP */
   --qcp-circle-size: 150px;
   --qcp-circle-stroke-width: 8px;
}

/* ===================================================================
   DARK MODE (Tema Escuro)
   =================================================================== */

[data-theme='dark'] {
   /* Cores de fundo invertidas */
   --bg-color: #1a202c;
   --surface-color: #2d3748;
   --background-color: #171923;

   /* Texto invertido */
   --text-primary: #f7fafc;
   --text-secondary: #a0aec0;
   --text-tertiary: #718096;
   --text-disabled: #4a5568;

   /* Bordas mais sutis no escuro */
   --border-color: #4a5568;
   --border-color-light: #2d3748;
   --border-color-dark: #718096;

   /* Sombras mais profundas */
   --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
   --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
   --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);

   /* Overlay mais suave (já há menos luz) */
   --overlay-color: rgba(0, 0, 0, 0.7);
   --overlay-light: rgba(0, 0, 0, 0.5);
   --overlay-dark: rgba(0, 0, 0, 0.9);
}

/* ===================================================================
   UTILITIES - Classes utilitárias baseadas em variáveis
   =================================================================== */

/* Elas podem ser usadas diretamente no HTML */
.transition-fast {
   transition: var(--transition-fast);
}

.transition-base {
   transition: var(--transition-base);
}

.transition-slow {
   transition: var(--transition-slow);
}

.shadow-sm {
   box-shadow: var(--shadow-sm);
}

.shadow-md {
   box-shadow: var(--shadow-md);
}

.shadow-lg {
   box-shadow: var(--shadow-lg);
}

.radius-sm {
   border-radius: var(--radius-sm);
}

.radius-md {
   border-radius: var(--radius-md);
}

.radius-lg {
   border-radius: var(--radius-lg);
}

.radius-full {
   border-radius: var(--radius-full);
}