/* ============================================================ Campus Theme — Dark Mode Applied via [data-theme="dark"] on element. Also respects prefers-color-scheme as a fallback. ============================================================ */ [data-theme="dark"] { /* Surfaces */ --bg-base: #0D0B1A; --bg-surface: #151228; --bg-elevated: #1E1A35; --bg-header: #100E1E; --bg-footer: #09080F; /* Text */ --txt-primary: #EAE6F8; --txt-secondary: #B8B0D8; --txt-muted: #7A72A4; --txt-on-dark: #EAE6F8; --txt-on-dark-muted: #B8B0D8; /* Borders */ --border: #2A2445; --border-strong: #3D355E; /* Shadows (stronger glow effect) */ --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.4); --shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6); } /* Scoped overrides for dark mode */ [data-theme="dark"] .hero { background: linear-gradient(135deg, #1A0D40 0%, #0C1E3D 100%); } [data-theme="dark"] .contact-cta { background: linear-gradient(135deg, #2E1A70 0%, #0C1E3D 100%); } [data-theme="dark"] .about { background: var(--bg-elevated); } [data-theme="dark"] .error-404__code { color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .form-input { background: var(--bg-elevated); color: var(--txt-primary); border-color: var(--border); } [data-theme="dark"] .form-input:focus { border-color: var(--clr-purple-light); box-shadow: 0 0 0 4px rgba(107, 77, 184, 0.25); } [data-theme="dark"] .form-status.is-success { background: rgba(31, 107, 58, 0.15); border-color: #2E9B55; color: #5CC882; } [data-theme="dark"] .form-status.is-error { background: rgba(181, 42, 42, 0.15); border-color: #C74040; color: #F87272; } /* System-level dark mode fallback (when JS hasn't set data-theme yet) */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --bg-base: #0D0B1A; --bg-surface: #151228; --bg-elevated: #1E1A35; --bg-header: #100E1E; --bg-footer: #09080F; --txt-primary: #EAE6F8; --txt-secondary: #B8B0D8; --txt-muted: #7A72A4; --txt-on-dark: #EAE6F8; --txt-on-dark-muted: #B8B0D8; --border: #2A2445; --border-strong: #3D355E; --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.4); --shadow: 0 4px 20px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6); } }