/* Solutioners GRC — Shared Theme Variables Included by all GRC module pages for consistent dark/light mode. The data-theme attribute is set by layout.js on . */ /* ─── Dark Mode (default) ─── */ :root, [data-theme="dark"] { --bg: #0a1628; --surface: #111d32; --surface2: #162340; --border: rgba(255,255,255,0.08); --text: #e0e8f0; --text2: #e0e8f0; --green: #3da556; --red: #e74c3c; --orange: #f39c12; --yellow: #f1c40f; --blue: #3498db; --purple: #9b59b6; --hover-bg: rgba(255,255,255,0.02); --input-bg: #162340; --input-border: rgba(255,255,255,0.12); --modal-overlay: rgba(0,0,0,0.6); --badge-draft: #95a5a6; --badge-yellow-text: #f1c40f; } /* ─── Light Mode ─── */ [data-theme="light"] { --bg: #f0f2f5; --surface: #ffffff; --surface2: #f5f6f8; --border: #d1d5db; --text: #000000; --text2: #000000; --green: #1d7a34; --red: #c0392b; --orange: #d35400; --yellow: #b8860b; --blue: #2471a3; --purple: #7d3c98; --hover-bg: rgba(0,0,0,0.03); --input-bg: #ffffff; --input-border: #d1d5db; --modal-overlay: rgba(0,0,0,0.4); --badge-draft: #6b7280; --badge-yellow-text: #92700c; } /* ─── Theme-aware common element overrides ─── */ /* Badge text adjustments for light mode readability */ [data-theme="light"] .badge-medium, [data-theme="light"] .badge-yellow { color: var(--badge-yellow-text); } [data-theme="light"] .badge-draft { color: var(--badge-draft); } /* Score badge light mode adjustments */ [data-theme="light"] .score-med { color: var(--badge-yellow-text); } /* Form focus states */ [data-theme="light"] .form-group input:focus, [data-theme="light"] .form-group select:focus, [data-theme="light"] .form-group textarea:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 2px rgba(29,122,52,0.15); } [data-theme="dark"] .form-group input:focus, [data-theme="dark"] .form-group select:focus, [data-theme="dark"] .form-group textarea:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 2px rgba(61,165,86,0.2); } /* Light mode select option styling */ [data-theme="light"] .form-group select option { background: #ffffff; color: #000000; } /* Light mode card shadow */ [data-theme="light"] .card, [data-theme="light"] .stat-card, [data-theme="light"] .committee-card { box-shadow: 0 1px 3px rgba(0,0,0,0.08); } /* Light mode modal shadow */ [data-theme="light"] .modal { box-shadow: 0 20px 60px rgba(0,0,0,0.15); }