/* ========================================================================== RatioFlow — Tema Scuro (Dark Mode) Override delle variabili CSS definite in app.css. Si attiva quando l'attributo data-theme="dark" è applicato al tag . Rapporti di contrasto WCAG 2.1 AA verificati: - Testo normale (#E8EAF0 su #0F1117): 15.1:1 ✓ - Testo muted (#9CA3AF su #0F1117): 5.8:1 ✓ - Primary (#5D9E75 su #0F1117): 6.2:1 ✓ - Primary su surface (#5D9E75 su #1A1D27): 5.4:1 ✓ ========================================================================== */ [data-theme="dark"] { /* Colori principali */ --color-bg: #0F1117; --color-surface: #1A1D27; --color-surface-2: #222535; --color-primary: #5D9E75; --color-primary-dark: #4A8060; --color-primary-light:#1A2E22; --color-text: #E8EAF0; --color-text-muted: #9CA3AF; --color-text-inverse: #FFFFFF; --color-border: #2D3146; --color-border-focus: #5D9E75; --color-danger: #F87171; --color-danger-light: #2D1515; --color-warning: #FBBF24; --color-warning-light:#2D2010; --color-success: #4ADE80; --color-success-light:#0F2A18; --color-info: #60A5FA; --color-info-light: #0F1E3D; /* Badge stati playbook */ --badge-draft-bg: #2D3146; --badge-draft-color: #D1D5DB; --badge-published-bg: #0F2A18; --badge-published-color: #4ADE80; --badge-needs-review-bg: #2D2010; --badge-needs-review-color:#FBBF24; --badge-archived-bg: #1F2234; --badge-archived-color: #9CA3AF; /* Sidebar — leggermente più chiara rispetto al bg */ --sidebar-bg: #12151F; --sidebar-text: #9DADB5; --sidebar-text-hover: #E8EAF0; --sidebar-active-bg: #5D9E75; --sidebar-active-text:#FFFFFF; --sidebar-logo-color: #FFFFFF; /* Header */ --header-bg: #1A1D27; --header-border: #2D3146; /* Ombre — più sottili nel tema scuro */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 6px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.3); --shadow-lg: 0 10px 15px rgba(0,0,0,0.4), 0 4px 6px rgba(0,0,0,0.3); } /* -------------------------------------------------------------------------- Override specifici dark mode — elementi che non usano variabili CSS -------------------------------------------------------------------------- */ [data-theme="dark"] .card { background-color: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .card-footer { background-color: var(--color-surface-2); } [data-theme="dark"] .table thead th { background-color: var(--color-surface-2); } [data-theme="dark"] .table tbody tr:hover { background-color: var(--color-surface-2); } [data-theme="dark"] .form-control { background-color: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .form-control:hover { border-color: #3D4260; } [data-theme="dark"] .form-control:disabled { background-color: #1F2234; color: var(--color-text-muted); } [data-theme="dark"] select.form-control { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); } [data-theme="dark"] .btn-secondary { background-color: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .btn-secondary:hover { background-color: #2A2E42; color: var(--color-text); } [data-theme="dark"] .btn-ghost:hover { background-color: var(--color-surface-2); } [data-theme="dark"] .dropdown-item:hover { background-color: var(--color-surface-2); } [data-theme="dark"] .user-menu-dropdown, [data-theme="dark"] .notifications-dropdown { background-color: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .notifications-header, [data-theme="dark"] .notifications-footer { background-color: var(--color-surface); } [data-theme="dark"] .notification-item.unread { background-color: #1A2E22; } [data-theme="dark"] .notification-item.unread:hover { background-color: #1F3828; } [data-theme="dark"] .stat-card { background-color: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .stat-card-icon--primary { background-color: var(--color-primary-light); color: var(--color-primary); } [data-theme="dark"] .stat-card-icon--warning { background-color: #2D2010; color: var(--color-warning); } [data-theme="dark"] .stat-card-icon--success { background-color: #0F2A18; color: var(--color-success); } [data-theme="dark"] .stat-card-icon--info { background-color: #0F1E3D; color: var(--color-info); } [data-theme="dark"] .auth-card { background-color: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .auth-footer { background-color: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .app-footer { background-color: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .notification-badge { border-color: var(--header-bg); } [data-theme="dark"] .alert--success { background-color: #0F2A18; border-color: #14532D; color: #4ADE80; } [data-theme="dark"] .alert--danger, [data-theme="dark"] .alert--error { background-color: #2D1515; border-color: #7F1D1D; color: #F87171; } [data-theme="dark"] .alert--warning { background-color: #2D2010; border-color: #78350F; color: #FBBF24; } [data-theme="dark"] .alert--info { background-color: #0F1E3D; border-color: #1E3A8A; color: #60A5FA; } [data-theme="dark"] .flash-message--success { background-color: #0F2A18; border-color: #14532D; color: #4ADE80; } [data-theme="dark"] .flash-message--error { background-color: #2D1515; border-color: #7F1D1D; color: #F87171; } [data-theme="dark"] .flash-message--warning { background-color: #2D2010; border-color: #78350F; color: #FBBF24; } [data-theme="dark"] .flash-message--info { background-color: #0F1E3D; border-color: #1E3A8A; color: #60A5FA; } [data-theme="dark"] .empty-state-icon { background-color: var(--color-surface-2); } [data-theme="dark"] .table-wrapper { border-color: var(--color-border); } [data-theme="dark"] .spinner { border-color: var(--color-border); border-top-color: var(--color-primary); } [data-theme="dark"] .btn-icon { border-color: var(--color-border); color: var(--color-text-muted); } [data-theme="dark"] .btn-icon:hover { background-color: var(--color-surface-2); color: var(--color-text); } [data-theme="dark"] .user-menu-btn { border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .user-menu-btn:hover { background-color: var(--color-surface-2); } [data-theme="dark"] .mobile-menu-btn { border-color: var(--color-border); color: var(--color-text); } [data-theme="dark"] .theme-toggle-track { background-color: var(--color-border); } /* -------------------------------------------------------------------------- Settings dark mode overrides -------------------------------------------------------------------------- */ [data-theme="dark"] .settings-nav-item { color: var(--color-text-muted); } [data-theme="dark"] .settings-nav-item:hover { background-color: var(--color-surface-2); color: var(--color-text); } [data-theme="dark"] .settings-nav-item.active { background-color: var(--color-primary-light); color: var(--color-primary); } [data-theme="dark"] .team-card { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .members-checkboxes { background: var(--color-surface-2); border-color: var(--color-border); } [data-theme="dark"] .checkbox-item:hover { background-color: var(--color-surface-2); } [data-theme="dark"] .functions-list .function-item:hover { background-color: var(--color-surface-2); } [data-theme="dark"] .badge--starter { background-color: #374151; color: #E5E7EB; } [data-theme="dark"] .badge--business { background-color: #1E3A5F; color: #93C5FD; } [data-theme="dark"] .badge--pro { background-color: #3B1F5E; color: #D8B4FE; } [data-theme="dark"] .plan-badge--starter { background-color: #374151; color: #E5E7EB; } [data-theme="dark"] .plan-badge--business { background-color: #1E3A5F; color: #93C5FD; } [data-theme="dark"] .plan-badge--pro { background-color: #3B1F5E; color: #D8B4FE; } [data-theme="dark"] .btn-danger-outline { color: var(--color-danger); border-color: var(--color-danger); } [data-theme="dark"] .btn-danger-outline:hover { background-color: var(--color-danger-light); } [data-theme="dark"] .row-active { background-color: var(--color-primary-light); } [data-theme="dark"] .plan-cell--active { background-color: var(--color-primary-light); } [data-theme="dark"] .user-avatar-sm { background-color: var(--color-primary-light); color: var(--color-primary); }