/* ==========================================================================
   Innova Fluxo - Design System v4.2 (Elegant & Professional)
   Author: Cline
   Description: Sistema de design fundamental, focado em elegância,
                consistência e uma experiência de usuário premium.
   ========================================================================== */

/* ==========================================================================
   1. PALETA DE CORES E TOKENS
   ========================================================================== */
:root {
  /* Paleta Principal - Azul Sutil e Profissional */
  --primary-50: #f0f7ff;
  --primary-100: #e0efff;
  --primary-200: #cce4ff;
  --primary-300: #b8d9ff;
  --primary-400: #5ea2ff;
  --primary-500: #3b82f6; /* Cor de destaque principal */
  --primary-600: #2563eb; /* Cor principal para botões e links */
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;

  /* Paleta Neutra - Cinzas com um tom frio para sofisticação */
  --neutral-0: #ffffff;
  --neutral-50: #f8f9fa;   /* Fundo principal da aplicação */
  --neutral-100: #f1f3f5;  /* Fundo de elementos sutilmente destacados */
  --neutral-200: #e9ecef;  /* Bordas sutis */
  --neutral-300: #dee2e6;  /* Bordas de inputs */
  --neutral-400: #ced4da;  /* Bordas de inputs em hover */
  --neutral-500: #adb5bd;  /* Texto placeholder e ícones secundários */
  --neutral-600: #868e96;  /* Texto secundário */
  --neutral-700: #495057;  /* Texto principal */
  --neutral-800: #343a40;  /* Títulos */
  --neutral-900: #212529;  /* Títulos muito escuros */

  /* Cores Semânticas */
  --success-50: #eefbf3; --success-500: #28a745; --success-600: #218838;
  --warning-50: #fff9e6; --warning-500: #ffc107; --warning-600: #e0a800;
  --error-50: #fdf2f2;   --error-500: #dc3545;   --error-600: #c82333;
  --info-50: #eef6ff;    --info-500: #17a2b8;    --info-600: #138496;

  /* Cores de Interface (Light Theme) */
  --text-primary: var(--neutral-800);
  --text-secondary: var(--neutral-600);
  --text-placeholder: var(--neutral-500);
  --text-disabled: var(--neutral-500);
  --text-inverse: var(--neutral-0);
  --text-link: var(--primary-600);
  --text-link-hover: var(--primary-700);
  --text-error: var(--error-600);

  --surface-primary: var(--neutral-0);      /* Cards, Modals */
  --surface-secondary: var(--neutral-50);   /* Body background */
  --surface-tertiary: var(--neutral-100);   /* Hover de itens, thead de tabelas */
  --surface-overlay: rgba(33, 37, 41, 0.6); /* Fundo de modal */
  
  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--neutral-400);
  --border-focus: var(--primary-500);
  --focus-ring: rgba(59, 130, 246, 0.25);

  /* ==========================================================================
     2. TIPOGRAFIA
     ========================================================================== */
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --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: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */

  --line-height-tight: 1.2;
  --line-height-snug: 1.375;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.75;

  /* ==========================================================================
     3. ESPAÇAMENTO E TAMANHOS (Grid de 4px)
     ========================================================================== */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-7: 1.75rem;  /* 28px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-20: 5rem;    /* 80px */

  /* ==========================================================================
     4. BORDAS E RAIOS
     ========================================================================== */
  --radius-sm: 4px;
  --radius-md: 8px;   /* Padrão para a maioria dos elementos */
  --radius-lg: 12px;  /* Cards e Modals */
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ==========================================================================
     5. SOMBRAS (Sistema de camadas suaves)
     ========================================================================== */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.07);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.04);
  --shadow-focus-ring: 0 0 0 3px var(--focus-ring);
  --shadow-kanban-card: var(--shadow-sm);
  --shadow-kanban-card-hover: var(--shadow-lg);
  --shadow-kanban-card-dragging: var(--shadow-xl);

  /* ==========================================================================
     6. TRANSIÇÕES E ANIMAÇÕES
     ========================================================================== */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);

  /* Gradientes */
  --gradient-primary: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--neutral-700) 0%, var(--neutral-800) 100%);
  --gradient-subtle: linear-gradient(180deg, var(--surface-primary) 0%, var(--surface-tertiary) 100%);

  /* ==========================================================================
     7. LAYOUT E Z-INDEX
     ========================================================================== */
  --width-sidebar: 260px;
  --width-sidebar-collapsed: 80px;
  --width-container-max: 1600px;
  --header-height: 88px;

  --z-base: 1;
  --z-sidebar: 100;
  --z-header: 90;
  --z-overlay: 200;
  --z-modal: 210;
  --z-tooltip: 300;
}

/* ==========================================================================
   DARK MODE THEME
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Paleta Neutra Escura */
    --neutral-0: #121212;    /* Fundo da aplicação */
    --neutral-50: #181818;  /* Fundo de cards */
    --neutral-100: #282828; /* Fundo de elementos sutilmente destacados */
    --neutral-200: #383838; /* Bordas sutis */
    --neutral-300: #505050; /* Bordas de inputs */
    --neutral-400: #707070; /* Bordas de inputs em hover */
    --neutral-500: #909090; /* Texto placeholder e ícones secundários */
    --neutral-600: #b0b0b0; /* Texto secundário */
    --neutral-700: #e0e0e0; /* Texto principal */
    --neutral-800: #f5f5f5; /* Títulos */
    --neutral-900: #ffffff; /* Títulos muito claros */

    /* Cores de Interface (Dark Theme) */
    --text-primary: var(--neutral-800);
    --text-secondary: var(--neutral-600);
    --text-placeholder: var(--neutral-500);
    --text-disabled: var(--neutral-500);
    --text-inverse: var(--neutral-900);
    --text-link: var(--primary-400);
    --text-link-hover: var(--primary-300);
    --text-error: var(--error-500);

    --surface-primary: var(--neutral-50);
    --surface-secondary: var(--neutral-0);
    --surface-tertiary: var(--neutral-100);
    --surface-overlay: rgba(0, 0, 0, 0.7);
    
    --border-subtle: var(--neutral-200);
    --border-default: var(--neutral-300);
    --border-strong: var(--neutral-400);
    --focus-ring: rgba(94, 162, 255, 0.3);

    /* Sombras Escuras */
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.15), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -4px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  }
}

/* ==========================================================================
   EXTENSÕES AVANÇADAS DO DESIGN SYSTEM v5.0
   ========================================================================== */

/* ==========================================================================
   PALETA DE CORES EXTENDIDA
   ========================================================================== */
:root {
  /* --- Cores de Status Avançadas --- */
  --status-draft: #64748b;
  --status-pending: #f59e0b;
  --status-approved: #10b981;
  --status-rejected: #ef4444;
  --status-archived: #6b7280;

  /* --- Gradientes Complexos --- */
  --gradient-ocean: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-sunset: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-forest: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --gradient-aurora: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  --gradient-cosmic: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-fire: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
  --gradient-ice: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
  --gradient-gold: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);

  /* --- Cores de Alertas Extendidas --- */
  --alert-info-bg: #dbeafe;
  --alert-info-border: #3b82f6;
  --alert-info-text: #1e40af;
  --alert-success-bg: #dcfce7;
  --alert-success-border: #16a34a;
  --alert-success-text: #15803d;
  --alert-warning-bg: #fef3c7;
  --alert-warning-border: #d97706;
  --alert-warning-text: #92400e;
  --alert-error-bg: #fee2e2;
  --alert-error-border: #dc2626;
  --alert-error-text: #991b1b;

  /* --- Cores de Progresso --- */
  --progress-track: var(--neutral-200);
  --progress-fill: var(--primary-500);
  --progress-success: var(--success-500);
  --progress-warning: var(--warning-500);
  --progress-error: var(--error-500);

  /* --- Cores de Badges --- */
  --badge-blue: #dbeafe;
  --badge-blue-text: #1e40af;
  --badge-green: #dcfce7;
  --badge-green-text: #15803d;
  --badge-yellow: #fef3c7;
  --badge-yellow-text: #92400e;
  --badge-red: #fee2e2;
  --badge-red-text: #991b1b;
  --badge-purple: #f3e8ff;
  --badge-purple-text: #7c3aed;
  --badge-gray: #f3f4f6;
  --badge-gray-text: #374151;
}

/* ==========================================================================
   TIPOGRAFIA AVANÇADA
   ========================================================================== */
:root {
  /* --- Letter Spacing --- */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;

  /* --- Text Shadows --- */
  --text-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --text-shadow-default: 0 1px 3px rgba(0, 0, 0, 0.1);
  --text-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --text-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --text-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);

  /* --- Font Weights Extendidos --- */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
}

/* ==========================================================================
   ANIMAÇÕES E MICROINTERAÇÕES AVANÇADAS
   ========================================================================== */
:root {
  /* --- Durações Extendidas --- */
  --duration-75: 75ms;
  --duration-100: 100ms;
  --duration-150: 150ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-500: 500ms;
  --duration-700: 700ms;
  --duration-1000: 1000ms;

  /* --- Curvas de Animação Avançadas --- */
  --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-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);

  /* --- Delays de Animação --- */
  --delay-75: 75ms;
  --delay-100: 100ms;
  --delay-150: 150ms;
  --delay-200: 200ms;
  --delay-300: 300ms;
  --delay-500: 500ms;
  --delay-700: 700ms;
  --delay-1000: 1000ms;
}

/* ==========================================================================
   SOMBRAS AVANÇADAS E EFEITOS
   ========================================================================== */
:root {
  /* --- Sombras Coloridas --- */
  --shadow-primary: 0 4px 6px -1px rgba(59, 130, 246, 0.1), 0 2px 4px -1px rgba(59, 130, 246, 0.06);
  --shadow-primary-lg: 0 10px 15px -3px rgba(59, 130, 246, 0.1), 0 4px 6px -2px rgba(59, 130, 246, 0.05);
  --shadow-success: 0 4px 6px -1px rgba(34, 197, 94, 0.1), 0 2px 4px -1px rgba(34, 197, 94, 0.06);
  --shadow-warning: 0 4px 6px -1px rgba(245, 158, 11, 0.1), 0 2px 4px -1px rgba(245, 158, 11, 0.06);
  --shadow-error: 0 4px 6px -1px rgba(239, 68, 68, 0.1), 0 2px 4px -1px rgba(239, 68, 68, 0.06);

  /* --- Sombras de Elevação --- */
  --shadow-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-elevation-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  --shadow-elevation-3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  --shadow-elevation-4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  --shadow-elevation-5: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);

  /* --- Glows e Efeitos --- */
  --glow-primary: 0 0 0 1px rgba(59, 130, 246, 0.05), 0 0 0 3px rgba(59, 130, 246, 0.1);
  --glow-success: 0 0 0 1px rgba(34, 197, 94, 0.05), 0 0 0 3px rgba(34, 197, 94, 0.1);
  --glow-warning: 0 0 0 1px rgba(245, 158, 11, 0.05), 0 0 0 3px rgba(245, 158, 11, 0.1);
  --glow-error: 0 0 0 1px rgba(239, 68, 68, 0.05), 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* ==========================================================================
   BORDAS E EFEITOS VISUAIS AVANÇADOS
   ========================================================================== */
:root {
  /* --- Raios de Borda Extendidos --- */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* --- Blur Effects --- */
  --blur-none: 0;
  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --blur-2xl: 40px;
  --blur-3xl: 64px;

  /* --- Backdrop Blur --- */
  --backdrop-blur-none: 0;
  --backdrop-blur-sm: 4px;
  --backdrop-blur-md: 8px;
  --backdrop-blur-lg: 16px;
  --backdrop-blur-xl: 24px;

  /* --- Gradientes de Borda --- */
  --border-gradient-primary: linear-gradient(135deg, var(--primary-400), var(--primary-600));
  --border-gradient-secondary: linear-gradient(135deg, var(--neutral-300), var(--neutral-500));
  --border-gradient-success: linear-gradient(135deg, var(--success-400), var(--success-600));
  --border-gradient-warning: linear-gradient(135deg, var(--warning-400), var(--warning-600));
  --border-gradient-error: linear-gradient(135deg, var(--error-400), var(--error-600));
}

/* ==========================================================================
   TAMANHOS E ESPAÇAMENTOS EXTENDIDOS
   ========================================================================== */
:root {
  /* --- Espaçamentos Negativos --- */
  --space-negative-1: -0.25rem;
  --space-negative-2: -0.5rem;
  --space-negative-3: -0.75rem;
  --space-negative-4: -1rem;
  --space-negative-5: -1.25rem;
  --space-negative-6: -1.5rem;
  --space-negative-8: -2rem;
  --space-negative-10: -2.5rem;
  --space-negative-12: -3rem;

  /* --- Tamanhos de Container Estendidos --- */
  --width-container-xs: 20rem;    /* 320px */
  --width-container-sm: 24rem;    /* 384px */
  --width-container-md: 28rem;    /* 448px */
  --width-container-lg: 32rem;    /* 512px */
  --width-container-xl: 36rem;    /* 576px */
  --width-container-2xl: 42rem;   /* 672px */
  --width-container-3xl: 48rem;   /* 768px */
  --width-container-4xl: 56rem;   /* 896px */
  --width-container-5xl: 64rem;   /* 1024px */
  --width-container-6xl: 72rem;   /* 1152px */
  --width-container-7xl: 80rem;   /* 1280px */

  /* --- Z-Index Estendido --- */
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-auto: auto;
  --z-sticky: 100;
  --z-dropdown: 1000;
  --z-overlay: 1010;
  --z-modal: 1020;
  --z-popover: 1030;
  --z-tooltip: 1040;
  --z-toast: 1050;
  --z-maximum: 2147483647;
}

/* ==========================================================================
   FILTROS E TRANSFORMAÇÕES AVANÇADAS
   ========================================================================== */
:root {
  /* --- Filtros de Saturação --- */
  --saturate-0: saturate(0);
  --saturate-50: saturate(0.5);
  --saturate-100: saturate(1);
  --saturate-150: saturate(1.5);
  --saturate-200: saturate(2);

  /* --- Filtros de Brilho --- */
  --brightness-0: brightness(0);
  --brightness-50: brightness(0.5);
  --brightness-75: brightness(0.75);
  --brightness-90: brightness(0.9);
  --brightness-95: brightness(0.95);
  --brightness-100: brightness(1);
  --brightness-105: brightness(1.05);
  --brightness-110: brightness(1.1);
  --brightness-125: brightness(1.25);
  --brightness-150: brightness(1.5);
  --brightness-200: brightness(2);

  /* --- Filtros de Contraste --- */
  --contrast-0: contrast(0);
  --contrast-50: contrast(0.5);
  --contrast-75: contrast(0.75);
  --contrast-100: contrast(1);
  --contrast-125: contrast(1.25);
  --contrast-150: contrast(1.5);
  --contrast-200: contrast(2);

  /* --- Filtros de Matiz --- */
  --hue-rotate-15: hue-rotate(15deg);
  --hue-rotate-30: hue-rotate(30deg);
  --hue-rotate-60: hue-rotate(60deg);
  --hue-rotate-90: hue-rotate(90deg);
  --hue-rotate-180: hue-rotate(180deg);
}