/* ============================================= ROGUE PRODUCTIONS — THEME SYSTEM 4 Themes: Light, Grey, Dark, Azure Blue Brand Palette: Dark Blue: #0b2e41 Mid-Blue: #0d4a5f Normal Blue: #3c8291 Light Blue: #92aeb5 Off-White: #ece8e7 Darker Gray: #a3a2a0 Uses CSS custom properties toggled via data-theme attribute on ============================================= */ /* ----------------------------------------- AZURE BLUE THEME (Default) ----------------------------------------- */ :root, [data-theme="azure"] { /* Brand */ --color-primary: #0d4a5f; --color-primary-hover: #0b2e41; --color-primary-light: #d4e8ec; --color-secondary: #3c8291; --color-accent: #92aeb5; /* Backgrounds */ --bg-body: #e8f1f3; --bg-primary: #e8f1f3; --bg-surface: #d4e8ec; --bg-surface-elevated: #ffffff; --bg-hero: linear-gradient(135deg, #0b2e41 0%, #3c8291 100%); --bg-section-alt: #d4e8ec; --bg-cta: linear-gradient(135deg, #0b2e41 0%, #3c8291 100%); --bg-footer: #0b2e41; --bg-card: #ffffff; --bg-card-hover: #e8f1f3; --bg-input: #ffffff; --bg-code: #d4e8ec; --bg-navbar: rgba(232, 241, 243, 0.95); --bg-overlay: rgba(11, 46, 65, 0.5); --bg-alert-success: #f0fdf4; --bg-alert-error: #fef2f2; --bg-alert-info: #d4e8ec; /* Text */ --text-primary: #0b2e41; --text-secondary: #0d4a5f; --text-muted: #7a8f96; --text-inverse: #ffffff; --text-hero: #ffffff; --text-cta: #ffffff; --text-footer: #92aeb5; --text-footer-heading: #ffffff; --text-link: #0d4a5f; --text-link-hover: #0b2e41; /* Borders */ --border-color: #92aeb5; --border-color-light: #d4e8ec; --border-color-input: #92aeb5; --border-color-focus: #0d4a5f; --border-radius: 8px; --border-radius-lg: 12px; --border-radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(13, 74, 95, 0.08); --shadow-md: 0 4px 6px -1px rgba(13, 74, 95, 0.1), 0 2px 4px -2px rgba(13, 74, 95, 0.08); --shadow-lg: 0 10px 15px -3px rgba(13, 74, 95, 0.1), 0 4px 6px -4px rgba(13, 74, 95, 0.08); --shadow-xl: 0 20px 25px -5px rgba(13, 74, 95, 0.15), 0 8px 10px -6px rgba(13, 74, 95, 0.08); /* Navbar */ --navbar-shadow: 0 1px 3px rgba(13, 74, 95, 0.12); --navbar-text: #0b2e41; --navbar-text-hover: #3c8291; --navbar-text-active: #3c8291; /* Theme button */ --theme-btn-bg: transparent; --theme-btn-hover: #d4e8ec; --theme-btn-text: #0d4a5f; /* Scrollbar */ --scrollbar-track: #d4e8ec; --scrollbar-thumb: #92aeb5; } /* ----------------------------------------- DARK THEME ----------------------------------------- */ [data-theme="dark"] { --color-primary: #92aeb5; --color-primary-hover: #b5cdd3; --color-primary-light: #122a36; --color-secondary: #3c8291; --color-accent: #92aeb5; --bg-body: #091e2b; --bg-primary: #091e2b; --bg-surface: #0b2e41; --bg-surface-elevated: #0d3a50; --bg-hero: linear-gradient(135deg, #091e2b 0%, #0d4a5f 100%); --bg-section-alt: #0b2e41; --bg-cta: linear-gradient(135deg, #0d4a5f 0%, #3c8291 100%); --bg-footer: #061520; --bg-card: #0b2e41; --bg-card-hover: #0d4a5f; --bg-input: #0b2e41; --bg-code: #0b2e41; --bg-navbar: rgba(9, 30, 43, 0.95); --bg-overlay: rgba(0, 0, 0, 0.7); --bg-alert-success: #052e16; --bg-alert-error: #450a0a; --bg-alert-info: #0b2e41; --text-primary: #ece8e7; --text-secondary: #92aeb5; --text-muted: #a3a2a0; --text-inverse: #0b2e41; --text-hero: #ece8e7; --text-cta: #ece8e7; --text-footer: #a3a2a0; --text-footer-heading: #ece8e7; --text-link: #92aeb5; --text-link-hover: #b5cdd3; --border-color: #0d4a5f; --border-color-light: #0b2e41; --border-color-input: #3c8291; --border-color-focus: #92aeb5; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3); --navbar-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); --navbar-text: #92aeb5; --navbar-text-hover: #b5cdd3; --navbar-text-active: #b5cdd3; --theme-btn-hover: #0d4a5f; --theme-btn-text: #92aeb5; --scrollbar-track: #0b2e41; --scrollbar-thumb: #0d4a5f; }