/* ================================================================ ACUITY OPTICS — GLOBAL THEME SYSTEM 5 complete themes, applied via data-theme attribute on Default: light-cyan (theme 1) ================================================================ */ /* ================================================================ THEME 1: ICE CYAN (Default - Clean light with cyan blue accent) ================================================================ */ [data-theme="light-cyan"], :root { --accent: #0284c7; --accent-hover: #0369a1; --accent-light: rgba(2, 132, 199, 0.08); --accent-glow: rgba(2, 132, 199, 0.18); --accent-rgb: 2, 132, 199; --bg-page: #f0f6ff; --bg-dark: #f0f6ff; --bg-card: rgba(255, 255, 255, 0.80); --bg-card-hover: rgba(255, 255, 255, 0.98); --bg-input: #ffffff; --bg-sidebar: rgba(255, 255, 255, 0.90); --bg-navbar: rgba(240, 246, 255, 0.88); --bg-nav-scrolled: rgba(255, 255, 255, 0.97); --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --text-on-accent: #ffffff; --border-thin: rgba(15, 23, 42, 0.09); --border-active: rgba(2, 132, 199, 0.35); --shadow-premium: 0 8px 30px rgba(15, 23, 42, 0.05), 0 2px 8px rgba(15, 23, 42, 0.03); --shadow-card: 0 4px 20px rgba(2, 132, 199, 0.05); --shadow-glow: 0 0 30px rgba(2, 132, 199, 0.12); --spot-top: rgba(2, 132, 199, 0.04); --spot-bottom: rgba(14, 165, 233, 0.03); --footer-bg: #0f1f35; --footer-text: rgba(255,255,255,0.6); --footer-head: #ffffff; /* Semantic */ --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --secondary:#8b5cf6; --gold: var(--accent); --gold-hover: var(--accent-hover); --gold-light: var(--accent-light); --gold-glow: var(--accent-glow); --border-active: var(--border-active); } /* ================================================================ THEME 2: MIDNIGHT NAVY (Deep dark navy with violet accent) ================================================================ */ [data-theme="midnight-navy"] { --accent: #818cf8; --accent-hover: #6366f1; --accent-light: rgba(129, 140, 248, 0.12); --accent-glow: rgba(129, 140, 248, 0.25); --accent-rgb: 129, 140, 248; --bg-page: #0b0f1e; --bg-dark: #0b0f1e; --bg-card: rgba(17, 24, 39, 0.85); --bg-card-hover: rgba(22, 30, 50, 0.95); --bg-input: rgba(22, 30, 50, 0.9); --bg-sidebar: rgba(10, 14, 28, 0.95); --bg-navbar: rgba(11, 15, 30, 0.92); --bg-nav-scrolled: rgba(10, 14, 28, 0.98); --text-primary: #e2e8f0; --text-secondary: #94a3b8; --text-muted: #475569; --text-on-accent: #ffffff; --border-thin: rgba(255, 255, 255, 0.07); --border-active: rgba(129, 140, 248, 0.4); --shadow-premium: 0 8px 40px rgba(0, 0, 0, 0.4), 0 2px 12px rgba(0, 0, 0, 0.3); --shadow-card: 0 4px 24px rgba(129, 140, 248, 0.08); --shadow-glow: 0 0 40px rgba(129, 140, 248, 0.15); --spot-top: rgba(129, 140, 248, 0.06); --spot-bottom: rgba(99, 102, 241, 0.04); --footer-bg: #060910; --footer-text: rgba(255,255,255,0.45); --footer-head: #e2e8f0; --success: #34d399; --warning: #fbbf24; --danger: #f87171; --secondary:#a78bfa; --gold: var(--accent); --gold-hover: var(--accent-hover); --gold-light: var(--accent-light); --gold-glow: var(--accent-glow); } /* ================================================================ THEME 3: OBSIDIAN GOLD (Pure black with rich amber/gold accent) ================================================================ */ [data-theme="obsidian-gold"] { --accent: #f59e0b; --accent-hover: #d97706; --accent-light: rgba(245, 158, 11, 0.10); --accent-glow: rgba(245, 158, 11, 0.22); --accent-rgb: 245, 158, 11; --bg-page: #080808; --bg-dark: #080808; --bg-card: rgba(18, 18, 18, 0.90); --bg-card-hover: rgba(24, 24, 24, 0.98); --bg-input: rgba(20, 20, 20, 0.95); --bg-sidebar: rgba(10, 10, 10, 0.97); --bg-navbar: rgba(8, 8, 8, 0.94); --bg-nav-scrolled: rgba(5, 5, 5, 0.99); --text-primary: #fafafa; --text-secondary: #a1a1aa; --text-muted: #52525b; --text-on-accent: #000000; --border-thin: rgba(255, 255, 255, 0.06); --border-active: rgba(245, 158, 11, 0.4); --shadow-premium: 0 8px 40px rgba(0, 0, 0, 0.6), 0 2px 12px rgba(0, 0, 0, 0.4); --shadow-card: 0 4px 24px rgba(245, 158, 11, 0.06); --shadow-glow: 0 0 40px rgba(245, 158, 11, 0.18); --spot-top: rgba(245, 158, 11, 0.04); --spot-bottom: rgba(217, 119, 6, 0.03); --footer-bg: #030303; --footer-text: rgba(255,255,255,0.4); --footer-head: #fafafa; --success: #4ade80; --warning: #fb923c; --danger: #f87171; --secondary:#c084fc; --gold: var(--accent); --gold-hover: var(--accent-hover); --gold-light: var(--accent-light); --gold-glow: var(--accent-glow); } /* ================================================================ THEME 4: EMERALD GLASS (Glassmorphism on deep teal gradient) ================================================================ */ [data-theme="emerald-glass"] { --accent: #10b981; --accent-hover: #059669; --accent-light: rgba(16, 185, 129, 0.12); --accent-glow: rgba(16, 185, 129, 0.25); --accent-rgb: 16, 185, 129; --bg-page: #061412; --bg-dark: #061412; --bg-card: rgba(255, 255, 255, 0.05); --bg-card-hover: rgba(255, 255, 255, 0.09); --bg-input: rgba(255, 255, 255, 0.07); --bg-sidebar: rgba(5, 12, 10, 0.85); --bg-navbar: rgba(6, 20, 18, 0.80); --bg-nav-scrolled: rgba(4, 16, 14, 0.96); --text-primary: #ecfdf5; --text-secondary: #6ee7b7; --text-muted: #34d399; --text-on-accent: #ffffff; --border-thin: rgba(16, 185, 129, 0.14); --border-active: rgba(16, 185, 129, 0.45); --shadow-premium: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(16, 185, 129, 0.08); --shadow-card: 0 4px 24px rgba(16, 185, 129, 0.10); --shadow-glow: 0 0 50px rgba(16, 185, 129, 0.20); --spot-top: rgba(16, 185, 129, 0.07); --spot-bottom: rgba(5, 150, 105, 0.05); --footer-bg: #020a08; --footer-text: rgba(110, 231, 183, 0.6); --footer-head: #ecfdf5; --success: #34d399; --warning: #fbbf24; --danger: #f87171; --secondary:#818cf8; --gold: var(--accent); --gold-hover: var(--accent-hover); --gold-light: var(--accent-light); --gold-glow: var(--accent-glow); } /* ================================================================ THEME 5: ROSE AURORA (Light rose/blush with vivid pink accent) ================================================================ */ [data-theme="rose-aurora"] { --accent: #e11d48; --accent-hover: #be123c; --accent-light: rgba(225, 29, 72, 0.07); --accent-glow: rgba(225, 29, 72, 0.18); --accent-rgb: 225, 29, 72; --bg-page: #fff1f2; --bg-dark: #fff1f2; --bg-card: rgba(255, 255, 255, 0.82); --bg-card-hover: rgba(255, 255, 255, 0.98); --bg-input: #ffffff; --bg-sidebar: rgba(255, 255, 255, 0.92); --bg-navbar: rgba(255, 241, 242, 0.90); --bg-nav-scrolled: rgba(255, 255, 255, 0.97); --text-primary: #1c0a0f; --text-secondary: #6d3847; --text-muted: #a07080; --text-on-accent: #ffffff; --border-thin: rgba(225, 29, 72, 0.10); --border-active: rgba(225, 29, 72, 0.35); --shadow-premium: 0 8px 30px rgba(225, 29, 72, 0.06), 0 2px 8px rgba(225, 29, 72, 0.04); --shadow-card: 0 4px 20px rgba(225, 29, 72, 0.04); --shadow-glow: 0 0 30px rgba(225, 29, 72, 0.12); --spot-top: rgba(225, 29, 72, 0.04); --spot-bottom: rgba(244, 63, 94, 0.03); --footer-bg: #2d0a15; --footer-text: rgba(255,255,255,0.55); --footer-head: #ffffff; --success: #059669; --warning: #d97706; --danger: #dc2626; --secondary:#7c3aed; --gold: var(--accent); --gold-hover: var(--accent-hover); --gold-light: var(--accent-light); --gold-glow: var(--accent-glow); } /* ================================================================ DARK THEME ADJUSTMENTS (shared for midnight-navy, obsidian-gold, emerald-glass) ================================================================ */ [data-theme="midnight-navy"] body, [data-theme="obsidian-gold"] body, [data-theme="emerald-glass"] body { background-color: var(--bg-page); } /* Dark card borders need stronger presence */ [data-theme="midnight-navy"] .premium-card, [data-theme="obsidian-gold"] .premium-card, [data-theme="emerald-glass"] .premium-card { border-color: var(--border-thin); background: var(--bg-card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* Dark navbar adjustments */ [data-theme="midnight-navy"] .navbar, [data-theme="obsidian-gold"] .navbar, [data-theme="emerald-glass"] .navbar { background: var(--bg-navbar); border-bottom-color: var(--border-thin); } [data-theme="midnight-navy"] .navbar.scrolled, [data-theme="obsidian-gold"] .navbar.scrolled, [data-theme="emerald-glass"] .navbar.scrolled { background: var(--bg-nav-scrolled); } /* Dark input fields */ [data-theme="midnight-navy"] .form-control, [data-theme="obsidian-gold"] .form-control, [data-theme="emerald-glass"] .form-control { background: var(--bg-input); color: var(--text-primary); border-color: var(--border-thin); } [data-theme="midnight-navy"] .form-control::placeholder, [data-theme="obsidian-gold"] .form-control::placeholder, [data-theme="emerald-glass"] .form-control::placeholder { color: var(--text-muted); } /* Dashboard specific dark overrides */ [data-theme="midnight-navy"] .dashboard-container, [data-theme="obsidian-gold"] .dashboard-container, [data-theme="emerald-glass"] .dashboard-container { background-color: var(--bg-page); } [data-theme="midnight-navy"] .sidebar, [data-theme="obsidian-gold"] .sidebar, [data-theme="emerald-glass"] .sidebar { background: var(--bg-sidebar); border-right-color: var(--border-thin); } [data-theme="midnight-navy"] .main-content, [data-theme="obsidian-gold"] .main-content, [data-theme="emerald-glass"] .main-content { background: var(--bg-page); } [data-theme="midnight-navy"] .glass-card, [data-theme="obsidian-gold"] .glass-card, [data-theme="emerald-glass"] .glass-card, [data-theme="midnight-navy"] .table-wrapper, [data-theme="obsidian-gold"] .table-wrapper, [data-theme="emerald-glass"] .table-wrapper { background: var(--bg-card); border-color: var(--border-thin); } [data-theme="midnight-navy"] .data-table th, [data-theme="obsidian-gold"] .data-table th, [data-theme="emerald-glass"] .data-table th { background: var(--bg-card-hover); color: var(--text-secondary); border-bottom-color: var(--border-thin); } [data-theme="midnight-navy"] .data-table tr, [data-theme="obsidian-gold"] .data-table tr, [data-theme="emerald-glass"] .data-table tr { border-bottom-color: var(--border-thin); color: var(--text-primary); } [data-theme="midnight-navy"] .data-table tr:hover, [data-theme="obsidian-gold"] .data-table tr:hover, [data-theme="emerald-glass"] .data-table tr:hover { background: var(--bg-card-hover); } [data-theme="midnight-navy"] .sidebar-profile-card, [data-theme="obsidian-gold"] .sidebar-profile-card, [data-theme="emerald-glass"] .sidebar-profile-card { background: rgba(255,255,255,0.04); border-color: var(--border-thin); } [data-theme="midnight-navy"] .content-header, [data-theme="obsidian-gold"] .content-header, [data-theme="emerald-glass"] .content-header { border-bottom-color: var(--border-thin); color: var(--text-primary); } [data-theme="midnight-navy"] .content-header h2, [data-theme="obsidian-gold"] .content-header h2, [data-theme="emerald-glass"] .content-header h2 { color: var(--text-primary); } [data-theme="midnight-navy"] .login-modal, [data-theme="obsidian-gold"] .login-modal, [data-theme="emerald-glass"] .login-modal { background: var(--bg-card); border-color: var(--border-thin); color: var(--text-primary); } [data-theme="midnight-navy"] .login-modal .form-control, [data-theme="obsidian-gold"] .login-modal .form-control, [data-theme="emerald-glass"] .login-modal .form-control { background: var(--bg-input); border-color: var(--border-thin); color: var(--text-primary); } [data-theme="midnight-navy"] .action-btn, [data-theme="obsidian-gold"] .action-btn, [data-theme="emerald-glass"] .action-btn { color: var(--text-secondary); border-color: var(--border-thin); } [data-theme="midnight-navy"] .day-label, [data-theme="obsidian-gold"] .day-label, [data-theme="emerald-glass"] .day-label { background: var(--bg-input); border-color: var(--border-thin); color: var(--text-secondary); } [data-theme="midnight-navy"] .slot-btn, [data-theme="obsidian-gold"] .slot-btn, [data-theme="emerald-glass"] .slot-btn { background: var(--bg-input); border-color: var(--border-thin); color: var(--text-primary); } [data-theme="midnight-navy"] .search-input, [data-theme="obsidian-gold"] .search-input, [data-theme="emerald-glass"] .search-input { background: var(--bg-input); border-color: var(--border-thin); color: var(--text-primary); } [data-theme="midnight-navy"] .form-control, [data-theme="obsidian-gold"] .form-control, [data-theme="emerald-glass"] .form-control { background: var(--bg-input) !important; color: var(--text-primary) !important; border-color: var(--border-thin) !important; } [data-theme="midnight-navy"] .select-control, [data-theme="obsidian-gold"] .select-control, [data-theme="emerald-glass"] .select-control { background: var(--bg-input) !important; color: var(--text-primary) !important; } [data-theme="midnight-navy"] .prescription-grid, [data-theme="obsidian-gold"] .prescription-grid, [data-theme="emerald-glass"] .prescription-grid { background: var(--bg-input); border-color: var(--border-thin); } [data-theme="midnight-navy"] .faq-card, [data-theme="obsidian-gold"] .faq-card, [data-theme="emerald-glass"] .faq-card { background: var(--bg-card); border-color: var(--border-thin); } [data-theme="midnight-navy"] .faq-header-trigger, [data-theme="obsidian-gold"] .faq-header-trigger, [data-theme="emerald-glass"] .faq-header-trigger { background: transparent; color: var(--text-primary); } [data-theme="midnight-navy"] .faq-body-content p, [data-theme="obsidian-gold"] .faq-body-content p, [data-theme="emerald-glass"] .faq-body-content p { color: var(--text-secondary); } [data-theme="midnight-navy"] .modal-overlay, [data-theme="obsidian-gold"] .modal-overlay, [data-theme="emerald-glass"] .modal-overlay { background: rgba(0, 0, 0, 0.6); } /* about section dark */ [data-theme="midnight-navy"] .about-visual-canvas, [data-theme="obsidian-gold"] .about-visual-canvas, [data-theme="emerald-glass"] .about-visual-canvas { background: var(--bg-card); border-color: var(--border-thin); } [data-theme="midnight-navy"] .metric-panel, [data-theme="obsidian-gold"] .metric-panel, [data-theme="emerald-glass"] .metric-panel, [data-theme="midnight-navy"] .value-panel, [data-theme="obsidian-gold"] .value-panel, [data-theme="emerald-glass"] .value-panel { background: var(--bg-card); border-color: var(--border-thin); } [data-theme="midnight-navy"] .board-row, [data-theme="obsidian-gold"] .board-row, [data-theme="emerald-glass"] .board-row { border-color: var(--border-thin); } [data-theme="midnight-navy"] .contact-item-panel, [data-theme="obsidian-gold"] .contact-item-panel, [data-theme="emerald-glass"] .contact-item-panel { background: var(--bg-card); border-color: var(--border-thin); } [data-theme="midnight-navy"] footer, [data-theme="obsidian-gold"] footer, [data-theme="emerald-glass"] footer { background: var(--footer-bg); } /* Rose aurora dark text fix for light inputs */ [data-theme="rose-aurora"] .form-control { background: var(--bg-input); color: var(--text-primary); border-color: var(--border-thin); } /* Navbar text on all themes */ [data-theme="midnight-navy"] .navbar-brand, [data-theme="obsidian-gold"] .navbar-brand, [data-theme="emerald-glass"] .navbar-brand { color: var(--text-primary); } [data-theme="midnight-navy"] .nav-link, [data-theme="obsidian-gold"] .nav-link, [data-theme="emerald-glass"] .nav-link { color: var(--text-secondary); } [data-theme="midnight-navy"] .navbar-collapse, [data-theme="obsidian-gold"] .navbar-collapse, [data-theme="emerald-glass"] .navbar-collapse { background: var(--bg-page); } /* h1/h2/h3/p text on dark backgrounds */ [data-theme="midnight-navy"] h1, [data-theme="midnight-navy"] h2, [data-theme="midnight-navy"] h3, [data-theme="midnight-navy"] h4, [data-theme="midnight-navy"] h5, [data-theme="obsidian-gold"] h1, [data-theme="obsidian-gold"] h2, [data-theme="obsidian-gold"] h3, [data-theme="obsidian-gold"] h4, [data-theme="obsidian-gold"] h5, [data-theme="emerald-glass"] h1, [data-theme="emerald-glass"] h2, [data-theme="emerald-glass"] h3, [data-theme="emerald-glass"] h4, [data-theme="emerald-glass"] h5 { color: var(--text-primary); } [data-theme="midnight-navy"] section, [data-theme="obsidian-gold"] section, [data-theme="emerald-glass"] section { border-bottom-color: var(--border-thin); } [data-theme="midnight-navy"] .hero-stats, [data-theme="obsidian-gold"] .hero-stats, [data-theme="emerald-glass"] .hero-stats { border-top-color: var(--border-thin); } [data-theme="midnight-navy"] .modal-glass-frame, [data-theme="obsidian-gold"] .modal-glass-frame, [data-theme="emerald-glass"] .modal-glass-frame { background: var(--bg-card); border-color: var(--border-thin); } [data-theme="midnight-navy"] .modal-banner, [data-theme="obsidian-gold"] .modal-banner, [data-theme="emerald-glass"] .modal-banner { background: var(--bg-card-hover); border-bottom-color: var(--border-thin); } [data-theme="midnight-navy"] .role-tabs, [data-theme="obsidian-gold"] .role-tabs, [data-theme="emerald-glass"] .role-tabs { background: var(--bg-input); border-color: var(--border-thin); } [data-theme="midnight-navy"] .role-tab, [data-theme="obsidian-gold"] .role-tab, [data-theme="emerald-glass"] .role-tab { color: var(--text-secondary); } /* Dark toast */ [data-theme="midnight-navy"] .toast, [data-theme="obsidian-gold"] .toast, [data-theme="emerald-glass"] .toast { background: var(--bg-card-hover); border-color: var(--border-thin); color: var(--text-primary); } /* Sidebar profile info dark */ [data-theme="midnight-navy"] .sidebar-profile-info h4, [data-theme="obsidian-gold"] .sidebar-profile-info h4, [data-theme="emerald-glass"] .sidebar-profile-info h4 { color: var(--text-primary); } [data-theme="midnight-navy"] .nav-category-header::after, [data-theme="obsidian-gold"] .nav-category-header::after, [data-theme="emerald-glass"] .nav-category-header::after { background: var(--border-thin); } /* Dashboard stat cards dark */ [data-theme="midnight-navy"] .stat-card, [data-theme="obsidian-gold"] .stat-card, [data-theme="emerald-glass"] .stat-card { border-color: var(--border-thin); } [data-theme="midnight-navy"] .stat-value, [data-theme="obsidian-gold"] .stat-value, [data-theme="emerald-glass"] .stat-value { color: var(--text-primary); } /* Doctor card dark */ [data-theme="midnight-navy"] .doc-card-header, [data-theme="obsidian-gold"] .doc-card-header, [data-theme="emerald-glass"] .doc-card-header { background: var(--bg-card-hover); border-bottom-color: var(--border-thin); } /* Bqs items dark */ [data-theme="midnight-navy"] .bqs-item, [data-theme="obsidian-gold"] .bqs-item, [data-theme="emerald-glass"] .bqs-item, [data-theme="midnight-navy"] .schedule-hour-row, [data-theme="obsidian-gold"] .schedule-hour-row, [data-theme="emerald-glass"] .schedule-hour-row, [data-theme="midnight-navy"] .faq-manager-item, [data-theme="obsidian-gold"] .faq-manager-item, [data-theme="emerald-glass"] .faq-manager-item, [data-theme="midnight-navy"] .service-config-card, [data-theme="obsidian-gold"] .service-config-card, [data-theme="emerald-glass"] .service-config-card, [data-theme="midnight-navy"] .testimonial-config-card, [data-theme="obsidian-gold"] .testimonial-config-card, [data-theme="emerald-glass"] .testimonial-config-card, [data-theme="midnight-navy"] .review-stat-card, [data-theme="obsidian-gold"] .review-stat-card, [data-theme="emerald-glass"] .review-stat-card { background: var(--bg-card-hover); border-color: var(--border-thin); } /* Settings toggles dark */ [data-theme="midnight-navy"] .settings-toggle-item, [data-theme="obsidian-gold"] .settings-toggle-item, [data-theme="emerald-glass"] .settings-toggle-item { border-bottom-color: var(--border-thin); } /* ================================================================ NATIVE CONTROL THEMING color-scheme makes the browser render native popups (the