:root {
  /* Cores principais do projeto */
  --primary-color: #1e40af;
  --primary-color-light: #3b82f6;
  --primary-color-dark: #1e3a8a;
  --primary-color-lighter: rgba(30, 64, 175, 0.1);
  
  /* Cores de texto */
  --text-primary: #212931;
  --text-secondary: #666666;
  --text-muted: #999999;
  --text-white: #ffffff;
  
  /* Cores de fundo */
  --bg-white: #ffffff;
  --bg-light: #f8f9fa;
  --bg-lighter: #f1f3f4;
  
  /* Cores de borda */
  --border-light: #e0e0e0;
  --border-medium: #d1d5db;
  --border-dark: #9ca3af;
  
  /* Cores de estado */
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --error-color: #ef4444;
  --info-color: #3b82f6;
  
  /* Cores específicas por aplicação */
  --mastodon-color: #6364ff;
  --mastodon-color-dark: #4f46e5;
  
  --lemmy-color: #00d4aa;
  --lemmy-color-dark: #00b894;
  
  --pixelfed-color: #ff6b6b;
  --pixelfed-color-dark: #ff5252;
  
  --peertube-color: #f96854;
  --peertube-color-dark: #e55a4a;
  
  --friendica-color: #3b82f6;
  --friendica-color-dark: #2563eb;
  
  --wordpress-color: #21759b;
  --wordpress-color-dark: #1a5f7a;
  
  --ghost-color: #15171a;
  --ghost-color-dark: #0f1114;
  
  --owncast-color: #ff6b6b;
  --owncast-color-dark: #ff5252;
  
  --pleroma-color: #8b5cf6;
  --pleroma-color-dark: #7c3aed;
  
  --akkoma-color: #ec4899;
  --akkoma-color-dark: #db2777;
  
  --misskey-color: #06b6d4;
  --misskey-color-dark: #0891b2;
  
  --funkwhale-color: #84cc16;
  --funkwhale-color-dark: #65a30d;
  
  --gotosocial-color: #3b82f6;
  --gotosocial-color-dark: #2563eb;
  
  --plume-color: #a855f7;
  --plume-color-dark: #9333ea;
  
  /* Cores de hover e focus */
  --hover-bg: rgba(30, 64, 175, 0.05);
  --hover-border: var(--primary-color);
  --hover-text: var(--primary-color);
  
  /* Cores de sombra */
  --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-heavy: 0 10px 15px rgba(0, 0, 0, 0.1);
  
  /* Cores de gradiente */
  --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-light) 100%);
  --gradient-light: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  
  /* Cores de transparência */
  --overlay-light: rgba(255, 255, 255, 0.9);
  --overlay-dark: rgba(0, 0, 0, 0.1);
  --overlay-medium: rgba(0, 0, 0, 0.05);
  
  /* Cores de superfície e layout */
  --surface-color: #f8fafc;
  --accent-color: #f59e0b;
  --accent-color-light: #fbbf24;
  
  /* Bordas e raios */
  --border-radius: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  
  /* Espaçamentos consistentes */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;
  
  /* Transições suaves */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* Classes para vídeo responsivo */
.video-container {
  position: relative;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  border-radius: var(--border-radius);
  overflow: hidden;
}

.video-iframe {
  position: absolute;
  inset: 0px;
}

/* Melhorar tratamento de imagens */
/* Estilos de .idx-boxed-img movidos para components.css */

/* Melhorias de acessibilidade */
.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 2px;
}

/* Reduzir movimento para usuários sensíveis */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .idx-boxed-img:hover {
    transform: none;
  }
  
  .button:hover {
    transform: none;
  }
}