/* =============================================================================
   DESIGN SYSTEM EQUILIBRADO - PALETA SÓBRIA COM TOQUES DE COR ELEGANTES
   ============================================================================= */

:root {
  /* ========================================
     FUNDAÇÃO NEUTRA (80% do design)
     ======================================== */
  
  /* Backgrounds */
  --bg-primary: #0f0f0f;
  --bg-secondary: #1a1a1a;
  --bg-elevated: #232323;
  --bg-hover: #2a2a2a;
  
  /* Textos */
  --text-primary: #e5e5e5;
  --text-secondary: #b5b5b5;
  --text-tertiary: #808080;
  --text-disabled: #555555;
  
  /* Borders */
  --border-subtle: #282828;
  --border-default: #3a3a3a;
  --border-strong: #4a4a4a;

  /* ========================================
     ACENTOS DE COR (20% do design - com propósito)
     ======================================== */
  
  /* Acento Principal - Cinza Neutro (ações primárias) */
  --accent-primary: #b0b0b4;
  --accent-primary-hover: #c4c4c8;
  --accent-primary-muted: #6a6a6e;
  
  /* Sucesso - Verde Sálvia (confirmações) */
  --color-success: #6b8e7f;
  --color-success-bg: #1e2621;
  --color-success-border: #3a4a42;
  
  /* Atenção - Âmbar Suave (avisos) */
  --color-warning: #a68d5f;
  --color-warning-bg: #262218;
  --color-warning-border: #4a4035;
  
  /* Erro - Terracota (erros) */
  --color-error: #996b6b;
  --color-error-bg: #261e1e;
  --color-error-border: #4a3a3a;
  
  /* Info - Lavanda Cinza (informações) */
  --color-info: #8b83a6;
  --color-info-bg: #1f1e24;
  --color-info-border: #3d3a47;

  /* ========================================
     ESPAÇAMENTOS
     ======================================== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;

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

  /* ========================================
     SHADOWS
     ======================================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.6);
  --shadow-accent: 0 4px 12px rgba(91, 124, 153, 0.15);

  /* ========================================
     TYPOGRAPHY SCALE
     ======================================== */
  --font-size-hero: 32px;
  --font-size-h1: 24px;
  --font-size-h2: 20px;
  --font-size-h3: 16px;
  --font-size-body: 14px;
  --font-size-small: 12px;
  --font-size-xs: 11px;
  --font-size-micro: 10px;

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

  /* ========================================
     ACTIVE/FOCUS STATES
     ======================================== */
  --accent-glow: 0 0 0 3px rgba(91, 124, 153, 0.2);
  --focus-ring: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent-primary);
}

/* =============================================================================
   PALETAS DE FUNDO PARA GIF DE TEXTO (12 opções elegantes)
   ============================================================================= */

/* Neutros Sólidos */
.bg-onix { background: #0a0a0a; }
.bg-marfim { background: #f8f8f6; color: #1a1a1a; }
.bg-grafite { background: #1f1f1f; }
.bg-nevoa { background: #e8e8e6; color: #1a1a1a; }

/* Gradientes Monocromáticos */
.bg-carvao { background: linear-gradient(180deg, #2a2a2a 0%, #0f0f0f 100%); }
.bg-nevoa-asc { background: linear-gradient(180deg, #f5f5f3 0%, #d8d8d6 100%); color: #1a1a1a; }

/* Toques de Cor Sutis */
.bg-ardosia { background: linear-gradient(135deg, #1a2332 0%, #0f1419 100%); }
.bg-musgo { background: linear-gradient(180deg, #1e241f 0%, #121714 100%); }
.bg-terracota { background: radial-gradient(ellipse at center, #2a2220 0%, #181412 100%); }
.bg-lavanda { background: linear-gradient(180deg, #221f28 0%, #14121a 100%); }
.bg-ambar { background: linear-gradient(135deg, #2a2318 0%, #181410 100%); }
.bg-meia-noite { background: radial-gradient(ellipse at center, #1a1f2e 0%, #0f1219 100%); }

/* =============================================================================
   BOTÕES
   ============================================================================= */

.btn-primary {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-muted) 100%);
  color: #ffffff;
  border: 1px solid var(--accent-primary-hover);
  box-shadow: var(--shadow-accent);
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-primary-hover) 0%, var(--accent-primary) 100%);
  box-shadow: 0 4px 12px rgba(91, 124, 153, 0.25);
  transform: translateY(-1px);
}

.btn-primary:disabled {
  background: var(--bg-elevated);
  color: var(--text-tertiary);
  border: 1px solid var(--border-default);
  box-shadow: none;
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

/* =============================================================================
   PRESETS (com toques de cor)
   ============================================================================= */

.preset-instagram {
  background: linear-gradient(135deg, #1a2332 0%, #0f1419 100%);
  border: 1px solid var(--accent-primary-muted);
  color: #a8c5d8;
}
.preset-instagram:hover {
  background: linear-gradient(135deg, #2a3342 0%, #1a2332 100%);
  border-color: var(--accent-primary);
}

.preset-tiktok {
  background: linear-gradient(135deg, #221f28 0%, #14121a 100%);
  border: 1px solid var(--color-info-border);
  color: #b8b0cc;
}
.preset-tiktok:hover {
  background: linear-gradient(135deg, #2a2530 0%, #1c1a22 100%);
  border-color: var(--color-info);
}

.preset-youtube {
  background: linear-gradient(135deg, #2a2220 0%, #181412 100%);
  border: 1px solid var(--color-error-border);
  color: #d4b5a8;
}
.preset-youtube:hover {
  background: linear-gradient(135deg, #352a28 0%, #2a2220 100%);
  border-color: var(--color-error);
}

.preset-reaction {
  background: linear-gradient(135deg, #1e241f 0%, #121714 100%);
  border: 1px solid var(--color-success-border);
  color: #b5c9be;
}
.preset-reaction:hover {
  background: linear-gradient(135deg, #252d27 0%, #1a221c 100%);
  border-color: var(--color-success);
}

/* =============================================================================
   STATS CARDS
   ============================================================================= */

.card-total {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-elevated) 100%);
  border-left: 3px solid var(--accent-primary);
  box-shadow: var(--shadow-md);
}

.card-done {
  background: linear-gradient(135deg, var(--color-success-bg) 0%, #232823 100%);
  border-left: 3px solid var(--color-success);
  box-shadow: 0 2px 8px rgba(107, 142, 127, 0.1);
}
.card-done .number {
  color: #8fa99f;
}

.card-pending {
  background: linear-gradient(135deg, var(--color-warning-bg) 0%, #2a251e 100%);
  border-left: 3px solid var(--color-warning);
  box-shadow: 0 2px 8px rgba(166, 141, 95, 0.1);
}
.card-pending .number {
  color: #bfa87f;
}

/* =============================================================================
   BADGES
   ============================================================================= */

.badge-count {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}

.badge-count-ok {
  background: linear-gradient(135deg, var(--color-success-bg) 0%, #232823 100%);
  color: #8fa99f;
  border: 1px solid var(--color-success-border);
}

.badge-count-low {
  background: linear-gradient(135deg, var(--color-warning-bg) 0%, #2a251e 100%);
  color: #bfa87f;
  border: 1px solid var(--color-warning-border);
}

.badge-count-high {
  background: linear-gradient(135deg, var(--color-error-bg) 0%, #2a2220 100%);
  color: #b5999a;
  border: 1px solid var(--color-error-border);
}

.badge-count-text {
  background: linear-gradient(135deg, var(--color-info-bg) 0%, #232228 100%);
  color: #a8a0bb;
  border: 1px solid var(--color-info-border);
}

/* =============================================================================
   TAGS
   ============================================================================= */

.tag-portrait {
  background: rgba(26, 35, 50, 0.85);
  backdrop-filter: blur(8px);
  color: #a8c5d8;
  border: 1px solid rgba(91, 124, 153, 0.3);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 3px;
}

.tag-story {
  background: rgba(34, 31, 40, 0.85);
  backdrop-filter: blur(8px);
  color: #b8b0cc;
  border: 1px solid rgba(139, 131, 166, 0.3);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 3px;
}

/* =============================================================================
   PROGRESS BARS (Sidebar)
   ============================================================================= */

.progress-bar {
  height: 3px;
  background: var(--bg-secondary);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  transition: width 300ms ease;
}

.progress-high-priority {
  background: linear-gradient(90deg, var(--color-warning) 0%, #bfa87f 100%);
}

.progress-traits {
  background: linear-gradient(90deg, var(--accent-primary) 0%, var(--accent-primary-hover) 100%);
}

.progress-context {
  background: linear-gradient(90deg, var(--color-success) 0%, #7fa093 100%);
}

.progress-general {
  background: linear-gradient(90deg, var(--color-info) 0%, #9d95b8 100%);
}

/* =============================================================================
   MICRO-INTERAÇÕES
   ============================================================================= */

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(91, 124, 153, 0.12);
  transition: all 200ms ease-out;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(91, 124, 153, 0.15);
  transition: all 180ms ease-out;
}

.template-card:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 1px var(--accent-primary-muted);
  transition: all 150ms ease;
}

.selected {
  border: 2px solid var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(91, 124, 153, 0.15);
}

/* =============================================================================
   TOOLTIPS
   ============================================================================= */

.tooltip-elegant {
  background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-hover) 100%);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  backdrop-filter: blur(8px);
  position: relative;
}

.tooltip-elegant::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--accent-primary) 50%, 
    transparent 100%
  );
}

/* =============================================================================
   RESPONSIVE - Mobile Improvements
   ============================================================================= */

@media (max-width: 768px) {
  /* GIF Creator mobile layout */
  .sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    max-height: 40vh;
    overflow-y: auto;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    z-index: 50;
  }
  
  .main-area {
    padding-bottom: 120px;
  }
  
  .settings {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-default);
    padding: var(--spacing-md);
    z-index: 40;
  }
  
  .generate-btn {
    position: sticky;
    bottom: var(--spacing-md);
  }
  
  /* Organizer mobile */
  .stat-card {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  .stat-card .text-lg {
    font-size: 14px;
  }
  
  /* Grid adjustments */
  .photos-grid,
  .image-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .photos-grid,
  .image-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
  }
  
  .effect-pills {
    gap: var(--spacing-xs);
  }
  
  .effect-pill {
    font-size: 10px;
    padding: 6px 10px;
  }
}