/**
 * CodeSolve Admin Panel - Design Tokens
 *
 * Este arquivo define todas as variáveis CSS do sistema de design.
 * PROIBIDO usar cores hardcoded nos componentes - usar sempre tokens.
 *
 * Documentação: docs/ui/TOKENS.md
 * Versão: 1.0.0
 */

:root {
  /* ==========================================================================
     1. CORES PRIMÁRIAS
     ========================================================================== */
  --color-primary: #00B3FF;
  --color-primary-hover: #00A0E6;
  --color-primary-active: #008BCC;
  --color-primary-muted: rgba(0, 179, 255, 0.15);

  /* ==========================================================================
     2. CORES DE FUNDO
     ========================================================================== */
  --color-bg-base: #0E1326;
  --color-bg-elevated: #1A1F3B;
  --color-bg-surface: #252B4A;
  --color-bg-overlay: rgba(14, 19, 38, 0.8);

  /* ==========================================================================
     3. CORES DE TEXTO
     ========================================================================== */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #A0AEC0;
  --color-text-muted: #718096;
  --color-text-inverse: #0E1326;

  /* ==========================================================================
     4. CORES DE BORDA
     ========================================================================== */
  --color-border-default: #2D3748;
  --color-border-muted: #1E2433;
  --color-border-focus: #00B3FF;

  /* ==========================================================================
     5. CORES SEMÂNTICAS - SUCESSO
     ========================================================================== */
  --color-success: #48BB78;
  --color-success-bg: rgba(72, 187, 120, 0.15);
  --color-success-border: rgba(72, 187, 120, 0.3);

  /* ==========================================================================
     6. CORES SEMÂNTICAS - ERRO
     ========================================================================== */
  --color-error: #F56565;
  --color-error-bg: rgba(245, 101, 101, 0.15);
  --color-error-border: rgba(245, 101, 101, 0.3);

  /* ==========================================================================
     7. CORES SEMÂNTICAS - WARNING
     ========================================================================== */
  --color-warning: #ECC94B;
  --color-warning-bg: rgba(236, 201, 75, 0.15);
  --color-warning-border: rgba(236, 201, 75, 0.3);

  /* ==========================================================================
     8. CORES SEMÂNTICAS - INFO
     ========================================================================== */
  --color-info: #63B3ED;
  --color-info-bg: rgba(99, 179, 237, 0.15);
  --color-info-border: rgba(99, 179, 237, 0.3);

  /* ==========================================================================
     9. ESPAÇAMENTO
     ========================================================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

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

  /* ==========================================================================
     11. TIPOGRAFIA - FONT SIZE
     ========================================================================== */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;

  /* ==========================================================================
     12. TIPOGRAFIA - FONT WEIGHT
     ========================================================================== */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ==========================================================================
     13. TIPOGRAFIA - LINE HEIGHT
     ========================================================================== */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* ==========================================================================
     14. DIMENSÕES - LARGURAS
     ========================================================================== */
  --width-sidebar: 240px;
  --width-sidebar-collapsed: 64px;
  --width-container-sm: 640px;
  --width-container-md: 768px;
  --width-container-lg: 1024px;
  --width-container-xl: 1280px;
  --width-container-2xl: 1440px;

  /* ==========================================================================
     15. DIMENSÕES - ALTURAS
     ========================================================================== */
  --height-topbar: 56px;
  --height-navbar: 48px;
  --height-input: 40px;
  --height-input-sm: 32px;
  --height-button: 40px;
  --height-button-sm: 32px;

  /* ==========================================================================
     16. BORDER RADIUS
     ========================================================================== */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* ==========================================================================
     17. SHADOWS
     ========================================================================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --shadow-focus: 0 0 0 3px rgba(0, 179, 255, 0.3);

  /* ==========================================================================
     18. TRANSITIONS
     ========================================================================== */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;

  /* ==========================================================================
     19. Z-INDEX
     ========================================================================== */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  /* ==========================================================================
     20. BREAKPOINTS (para referência em JS - CSS usa @media)
     ========================================================================== */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1440px;
}

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

/* Focus Ring */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Status Colors */
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }

.bg-success { background-color: var(--color-success-bg); }
.bg-error { background-color: var(--color-error-bg); }
.bg-warning { background-color: var(--color-warning-bg); }
.bg-info { background-color: var(--color-info-bg); }

/* Security Warning */
.security-warning {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.security-warning::before {
  content: "⚠️";
}

/* Validation States */
.input-error {
  border-color: var(--color-error) !important;
}

.input-error:focus {
  box-shadow: 0 0 0 3px var(--color-error-bg) !important;
}

.input-success {
  border-color: var(--color-success) !important;
}

.input-success:focus {
  box-shadow: 0 0 0 3px var(--color-success-bg) !important;
}

/* Status Indicators */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  display: inline-block;
}

.status-dot--online { background: var(--color-success); }
.status-dot--offline { background: var(--color-error); }
.status-dot--warning { background: var(--color-warning); }

/* Dirty State Indicator */
.dirty-indicator {
  display: none;
  width: 6px;
  height: 6px;
  background: var(--color-warning);
  border-radius: var(--radius-full);
  margin-left: var(--space-2);
}

.is-dirty .dirty-indicator {
  display: inline-block;
}

/* Sticky Footer */
.sticky-footer {
  position: fixed;
  bottom: 0;
  left: var(--width-sidebar);
  right: 0;
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-border-default);
  padding: var(--space-4) var(--space-6);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  transform: translateY(100%);
  transition: transform var(--transition-normal);
  z-index: var(--z-sticky);
}

.sticky-footer.is-visible {
  transform: translateY(0);
}

@media (max-width: 1024px) {
  .sticky-footer {
    left: 0;
  }
}