/* AfterDark - Design Tokens (Variáveis CSS) */ :root { /* ========== Cores Primárias ========== */ --primary-color: #667eea; --primary-dark: #764ba2; --secondary-color: #f093fb; --secondary-dark: #f5576c; --accent-color: #667eea; /* ========== Cores de Status ========== */ --color-success: #56ab2f; --color-success-light: #a8e063; --color-danger: #ff6b6b; --color-danger-dark: #c92a2a; --color-warning: #ffa94d; --color-info: #667eea; /* ========== Cores de Fundo ========== */ --background-body: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); --background-dark: #0f0f23; --background-card: #1a1a2e; --background-card-secondary: #16213e; --background-hero: linear-gradient( 180deg, color-mix(in srgb, var(--background-card) 88%, transparent), color-mix(in srgb, var(--background-dark) 88%, transparent) ); --background-input: rgba(255, 255, 255, 0.05); --background-input-focus: rgba(255, 255, 255, 0.08); /* ========== Cores de Texto ========== */ --text-primary: #e0e6ed; --text-secondary: #a0aec0; --text-muted: #718096; --text-white: #ffffff; --text-light: #f7f9ff; --text-blue: #cbd5f5; /* ========== Bordas ========== */ --border-color: rgba(255, 255, 255, 0.05); --border-color-light: rgba(255, 255, 255, 0.1); --border-color-medium: rgba(255, 255, 255, 0.08); --border-color-focus: var(--primary-color); /* ========== Gradientes Principais ========== */ --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --gradient-primary-hover: linear-gradient(135deg, #764ba2 0%, #667eea 100%); --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); --gradient-card: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); /* ========== Gradientes de Status/Botões ========== */ --gradient-success: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%); --gradient-danger: linear-gradient(135deg, #ff6b6b 0%, #c92a2a 100%); --gradient-warning: linear-gradient(135deg, #ffa94d 0%, #ff6b35 100%); --gradient-info: linear-gradient(135deg, #a8c0ff 0%, #3f2b96 100%); /* ========== Sombras ========== */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4); --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.6); --shadow-color: rgba(0, 0, 0, 0.4); --shadow-primary: 0 6px 20px rgba(102, 126, 234, 0.4); --shadow-success: 0 6px 20px rgba(86, 171, 47, 0.4); --shadow-danger: 0 6px 20px rgba(255, 107, 107, 0.4); --shadow-chip: 0 6px 20px rgba(59, 130, 246, 0.28); /* ========== Espaçamentos ========== */ --spacing-xs: 6px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 20px; --spacing-xl: 30px; --spacing-2xl: 40px; /* ========== Border Radius ========== */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 50%; /* ========== Transições ========== */ /* ========== Proporcoes de Capas ========== */ --game-cover-horizontal-ratio: 460 / 215; --game-cover-vertical-ratio: 2 / 3; --game-cover-horizontal-fit: cover; --game-cover-vertical-fit: cover; --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; --transition-slow: 0.4s ease; /* ========== Tipografia ========== */ --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --font-size-xs: 11px; --font-size-sm: 12px; --font-size-md: 14px; --font-size-lg: 16px; --font-size-xl: 18px; --font-size-2xl: 24px; --font-size-3xl: 28px; --font-size-4xl: 32px; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ========== Z-Index ========== */ --z-index-dropdown: 1000; --z-index-modal: 2000; --z-index-tooltip: 3000; /* ========== Gradientes de Badges ========== */ --badge-jogando: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --badge-finalizado: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%); --badge-pausado: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); --badge-abandonado: linear-gradient(135deg, #ff6b6b 0%, #c92a2a 100%); --badge-planejando: linear-gradient(135deg, #a8c0ff 0%, #3f2b96 100%); --badge-destaque-bg: rgba(246, 173, 85, 0.15); --badge-destaque-border: rgba(246, 173, 85, 0.9); --badge-destaque-color: #f6ad55; --badge-unificado: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.15) 100%); --badge-unificado-borda: rgba(102, 126, 234, 0.35); --badge-text-color: white; /* ========== Hover States ========== */ --hover-bg: rgba(255, 255, 255, 0.08); --gradient-overlay: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(15, 23, 42, 0.6)); /* ========== Scrollbar ========== */ --scrollbar-track: linear-gradient(135deg, #0f2027 0%, #16213e 100%); --scrollbar-thumb: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --scrollbar-thumb-hover: linear-gradient(135deg, #764ba2 0%, #667eea 100%); --scrollbar-thumb-active: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%); --scrollbar-border: #0f2027; /* ========== Gradientes de Notas ========== */ --nota-excelente: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%); --nota-boa: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --nota-media: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); --nota-baixa: linear-gradient(135deg, #ff6b6b 0%, #c92a2a 100%); /* ========== Elementos Específicos ========== */ --brand-gradient: linear-gradient(120deg, #ff6a00 0%, #ff00d4 45%, #7df9ff 100%); --steam-button-bg: linear-gradient(135deg, #0f1923 0%, #1b2838 100%); --steam-button-text: #c7d5e0; --select-background: linear-gradient(135deg, rgba(102, 126, 234, 0.35), rgba(118, 75, 162, 0.35)); /* ========== Feedback ========== */ --feedback-error-bg: linear-gradient(135deg, rgba(255, 107, 107, 0.2), rgba(201, 42, 42, 0.35)); --feedback-error-border: rgba(255, 107, 107, 0.5); --feedback-error-text: #ffdada; --feedback-success-bg: linear-gradient(135deg, rgba(86, 171, 47, 0.22), rgba(168, 224, 99, 0.35)); --feedback-success-border: rgba(168, 224, 99, 0.5); --feedback-success-text: #f0ffe2; /* ========== Toast ========== */ --toast-info: linear-gradient(135deg, rgba(99, 102, 241, 0.95) 0%, rgba(67, 56, 202, 0.95) 100%); --toast-confirm: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(76, 81, 191, 0.95)); }