/* 
 * Cloud API v2 - CSS Variables (Purple/Cyan Theme)
 * Baseado na paleta de cores Purple/Cyan definida em colors.json
 */

:root {
  /* ========================================
   * CORES PRIMÁRIAS & BRAND
   * ======================================== */
  --color-primary: hsl(45 100% 55%);
  --color-primary-dark: hsl(45 90% 50%);
  --color-primary-darker: hsl(45 80% 45%);
  --color-primary-light: hsl(45 100% 65%);
  --color-primary-lighter: hsl(45 100% 75%);

  /* ========================================
   * BACKGROUNDS
   * ======================================== */
  --bg-main: hsl(264 100% 8%);
  --bg-foreground: hsl(180 100% 95%);
  --bg-secondary: hsl(264 35% 20%);
  --bg-card: hsl(264 50% 12%);
  --bg-card-solid: hsl(264 50% 12%);
  --bg-muted: hsl(264 25% 15%);
  --bg-input: hsl(264 25% 15%);
  --bg-overlay: hsl(264 25% 25%);
  --bg-overlay-dark: hsl(264 35% 20%);

  /* ========================================
   * TEXTOS
   * ======================================== */
  --text-primary: hsl(180 100% 95%);
  --text-secondary: hsl(180 50% 85%);
  --text-muted: hsl(264 25% 65%);
  --text-disabled: hsl(264 15% 50%);
  --text-placeholder: hsl(264 15% 55%);

  /* ========================================
   * BORDAS
   * ======================================== */
  --border-default: hsl(264 25% 25%);
  --border-hover: hsl(264 35% 35%);
  --border-focus: hsl(45 100% 55%);
  --border-card: hsl(264 25% 20%);

  /* ========================================
   * ACCENT COLORS
   * ======================================== */
  --accent-primary: hsl(35 100% 60%);
  --accent-secondary: hsl(35 90% 55%);
  --accent-light: hsl(35 100% 70%);
  --accent-dark: hsl(35 80% 50%);

  /* ========================================
   * ESTADOS (SUCCESS, ERROR, WARNING, INFO)
   * ======================================== */
  --success-bg: hsl(142 76% 36% / 0.1);
  --success-border: hsl(142 76% 36% / 0.2);
  --success-text: hsl(142 76% 65%);

  --error-bg: hsl(0 84.2% 60.2% / 0.1);
  --error-border: hsl(0 84.2% 60.2% / 0.2);
  --error-text: hsl(0 84.2% 70%);

  --warning-bg: hsl(38 92% 50% / 0.1);
  --warning-border: hsl(38 92% 50% / 0.2);
  --warning-text: hsl(38 92% 65%);

  --info-bg: hsl(225 100% 65% / 0.1);
  --info-border: hsl(225 100% 65% / 0.2);
  --info-text: hsl(225 100% 75%);

  --destructive-bg: hsl(0 84.2% 60.2% / 0.1);
  --destructive-border: hsl(0 84.2% 60.2% / 0.2);
  --destructive-text: hsl(0 84.2% 60.2%);

  /* ========================================
   * INTERAÇÕES
   * ======================================== */
  --interactive-hover: hsl(264 35% 20%);
  --interactive-active: hsl(264 50% 15%);
  --interactive-focus: hsl(45 100% 55%);
  --interactive-disabled: hsl(264 25% 15%);
  --interactive-ring: hsl(45 100% 55%);

  /* ========================================
   * SIDEBAR
   * ======================================== */
  --sidebar-bg: hsl(264 60% 10%);
  --sidebar-primary: hsl(45 100% 55%);
  --sidebar-accent: hsl(35 100% 60%);
  --sidebar-muted: hsl(264 25% 50%);
  --sidebar-border: hsl(264 35% 15%);

  /* ========================================
   * GRADIENTES
   * ======================================== */
  --gradient-primary: linear-gradient(135deg, hsl(45 100% 55%), hsl(35 100% 60%));
  --gradient-secondary: linear-gradient(135deg, hsl(264 50% 12%), hsl(264 35% 20%));
  --gradient-sidebar: linear-gradient(180deg, hsl(264 60% 10%), hsl(264 50% 8%));
  --gradient-background: linear-gradient(135deg, hsl(264 100% 8%), hsl(264 80% 6%));
  --gradient-card: linear-gradient(135deg, hsl(264 50% 12%), hsl(264 45% 10%));
  --gradient-button-primary: linear-gradient(135deg, hsl(45 100% 55%), hsl(35 100% 60%));
  --gradient-button-secondary: linear-gradient(135deg, hsl(264 35% 20%), hsl(264 45% 25%));

  /* ========================================
   * SOMBRAS
   * ======================================== */
  --shadow-glow: 0 0 40px hsl(45 100% 55% / 0.3);
  --shadow-card: 0 8px 32px hsl(264 100% 4% / 0.4);
  --shadow-button: 0 4px 20px hsl(45 100% 55% / 0.2);
  --shadow-input-focus: 0 0 0 2px hsl(45 100% 55% / 0.2);
  --shadow-subtle: 0 2px 8px hsl(264 100% 4% / 0.3);
  --shadow-large: 0 12px 48px hsl(264 100% 4% / 0.5);

  /* ========================================
   * FORMULÁRIOS
   * ======================================== */
  --form-input-bg: hsl(264 25% 15%);
  --form-input-border: hsl(264 25% 25%);
  --form-input-focus-bg: hsl(264 30% 18%);
  --form-input-focus-border: hsl(45 100% 55%);
  --form-input-ring: hsl(45 100% 55%);

  /* ========================================
   * BOTÕES
   * ======================================== */
  --btn-primary: linear-gradient(135deg, hsl(45 100% 55%), hsl(35 100% 60%));
  --btn-primary-hover: linear-gradient(135deg, hsl(45 90% 50%), hsl(35 90% 55%));
  --btn-secondary: linear-gradient(135deg, hsl(264 35% 20%), hsl(264 45% 25%));
  --btn-secondary-hover: linear-gradient(135deg, hsl(264 40% 25%), hsl(264 50% 30%));
  --btn-danger: hsl(0 84.2% 60.2%);
  --btn-danger-hover: hsl(0 84.2% 55%);
  --btn-accent: hsl(35 100% 60%);
  --btn-accent-hover: hsl(35 90% 55%);

  /* ========================================
   * NAVEGAÇÃO
   * ======================================== */
  --nav-tab-inactive: hsl(264 25% 15%);
  --nav-tab-active: hsl(264 50% 20%);
  --nav-tab-hover: hsl(264 35% 18%);
  --nav-tab-border-active: hsl(45 100% 55%);

  /* ========================================
   * DASHBOARD
   * ======================================== */
  --dashboard-sidebar: linear-gradient(180deg, hsl(264 60% 10%), hsl(264 50% 8%));
  --dashboard-main: hsl(264 100% 8%);
  --dashboard-card-bg: hsl(264 50% 12%);
  --dashboard-stat-card-shadow: 0 8px 32px hsl(264 100% 4% / 0.4);

  /* ========================================
   * UTILIDADES
   * ======================================== */
  --opacity-subtle: 0.05;
  --opacity-light: 0.1;
  --opacity-medium: 0.2;
  --opacity-heavy: 0.3;
  --opacity-strong: 0.5;

  --blur-light: blur(4px);
  --blur-medium: blur(8px);
  --blur-heavy: blur(16px);

  --radius-small: 6px;
  --radius-medium: 8px;
  --radius-large: 12px;
  --radius-xl: 16px;
  --radius-card: 12px;
  --radius-button: 8px;
  --radius-input: 8px;

  /* ========================================
   * ESPAÇAMENTOS (BASEADO EM 8px)
   * ======================================== */
  --space-1: 4px;   /* 0.25rem */
  --space-2: 8px;   /* 0.5rem */
  --space-3: 12px;  /* 0.75rem */
  --space-4: 16px;  /* 1rem */
  --space-5: 20px;  /* 1.25rem */
  --space-6: 24px;  /* 1.5rem */
  --space-8: 32px;  /* 2rem */
  --space-10: 40px; /* 2.5rem */
  --space-12: 48px; /* 3rem */
  --space-16: 64px; /* 4rem */

  /* ========================================
   * TIPOGRAFIA
   * ======================================== */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;

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

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-loose: 1.75;

  /* ========================================
   * TRANSIÇÕES
   * ======================================== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ========================================
   * Z-INDEX
   * ======================================== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ========================================
 * CLASSES UTILITÁRIAS
 * ======================================== */

/* Gradientes */
.bg-gradient-primary {
  background: var(--gradient-primary);
}

.bg-gradient-secondary {
  background: var(--gradient-secondary);
}

.bg-gradient-sidebar {
  background: var(--gradient-sidebar);
}

.bg-gradient-background {
  background: var(--gradient-background);
}

.bg-gradient-card {
  background: var(--gradient-card);
}

/* Backgrounds */
.bg-main {
  background: var(--bg-main);
}

.bg-card {
  background: var(--bg-card);
  backdrop-filter: var(--blur-medium);
}

.bg-muted {
  background: var(--bg-muted);
}

/* Sombras */
.shadow-glow {
  box-shadow: var(--shadow-glow);
}

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

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

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

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

/* Border radius */
.rounded-card {
  border-radius: var(--radius-card);
}

.rounded-button {
  border-radius: var(--radius-button);
}

.rounded-input {
  border-radius: var(--radius-input);
}

.rounded-large {
  border-radius: var(--radius-large);
}

.rounded-xl {
  border-radius: var(--radius-xl);
}

/* Estados */
.state-success {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success-text);
}

.state-error {
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error-text);
}

.state-warning {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
}

.state-info {
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  color: var(--info-text);
}

.state-destructive {
  background: var(--destructive-bg);
  border: 1px solid var(--destructive-border);
  color: var(--destructive-text);
}

/* Botões */
.btn-primary {
  background: var(--btn-primary);
  color: var(--text-primary);
  border: none;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-button);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-normal);
}

.btn-primary:hover {
  background: var(--btn-primary-hover);
  box-shadow: var(--shadow-button);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--btn-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-button);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-normal);
}

.btn-secondary:hover {
  background: var(--btn-secondary-hover);
  border-color: var(--border-hover);
}

.btn-accent {
  background: var(--btn-accent);
  color: var(--text-primary);
  border: none;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-button);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-normal);
}

.btn-accent:hover {
  background: var(--btn-accent-hover);
}

.btn-danger {
  background: var(--btn-danger);
  color: var(--text-primary);
  border: none;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-button);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-normal);
}

.btn-danger:hover {
  background: var(--btn-danger-hover);
}

/* Inputs */
.input {
  background: var(--form-input-bg);
  border: 1px solid var(--form-input-border);
  color: var(--text-primary);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-input);
  font-size: var(--font-size-base);
  transition: var(--transition-normal);
}

.input:focus {
  outline: none;
  background: var(--form-input-focus-bg);
  border-color: var(--form-input-focus-border);
  box-shadow: var(--shadow-input-focus);
}

.input::placeholder {
  color: var(--text-placeholder);
}

/* Cards */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  backdrop-filter: var(--blur-medium);
}

.card-glow {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-glow);
  backdrop-filter: var(--blur-medium);
}

/* Transições */
.transition-fast {
  transition: all var(--transition-fast);
}

.transition-normal {
  transition: all var(--transition-normal);
}

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

/* Glows especiais */
.glow-cyan {
  box-shadow: 0 0 20px hsl(180 100% 50% / 0.3);
}

.glow-purple {
  box-shadow: 0 0 20px hsl(264 100% 50% / 0.3);
}

.glow-accent {
  box-shadow: 0 0 20px hsl(225 100% 65% / 0.3);
}

/* Text colors */
.text-primary {
  color: var(--text-primary);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-muted {
  color: var(--text-muted);
}

.text-accent {
  color: var(--accent-primary);
}

.text-cyan {
  color: var(--color-primary);
}

/* Border colors */
.border-default {
  border-color: var(--border-default);
}

.border-focus {
  border-color: var(--border-focus);
}

.border-card {
  border-color: var(--border-card);
}