/** * Theme Variables - NexGenHealth.io * CSS Custom Properties for Dark and Light themes * * Usage: Reference variables using var(--variable-name) * Theme is applied via data-theme attribute on element */ /* ============================================ DARK THEME (Default) ============================================ */ :root, [data-theme="dark"] { /* Primary Background Colors */ --bg-primary: #000000; --bg-secondary: #1a1a1a; --bg-tertiary: #2a2a2a; --bg-hover: #333333; --bg-elevated: #2a2a2a; /* Overlay & Backdrop */ --bg-overlay: rgba(0, 0, 0, 0.9); --bg-backdrop: rgba(0, 0, 0, 0.8); --bg-modal: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); /* Text Colors */ --text-primary: #ffffff; --text-secondary: #cccccc; --text-muted: #888888; --text-disabled: #666666; --text-inverse: #000000; /* Accent Colors - Primary Brand Green */ --accent-primary: #00875A; --accent-hover: #00a572; --accent-light: rgba(0, 135, 90, 0.15); --accent-lighter: rgba(0, 135, 90, 0.1); --accent-border: #00875A; /* Border Colors */ --border-primary: #333333; --border-secondary: #444444; --border-light: #555555; --border-focus: #00875A; /* Status Colors */ --color-error: #dc3545; --color-error-hover: #c82333; --color-error-bg: rgba(220, 53, 69, 0.15); --color-warning: #ffc107; --color-warning-bg: rgba(255, 193, 7, 0.15); --color-success: #00875A; --color-success-bg: rgba(0, 135, 90, 0.15); --color-info: #17a2b8; --color-info-bg: rgba(23, 162, 184, 0.15); /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.6); /* Gradients */ --gradient-bg: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); --gradient-overlay: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); --gradient-divider: linear-gradient(90deg, transparent, #333333, transparent); /* Form Elements */ --input-bg: #333333; --input-border: #444444; --input-border-focus: #00875A; --input-text: #ffffff; --input-placeholder: #888888; /* Toggle/Switch */ --toggle-bg: #444444; --toggle-bg-active: #00875A; --toggle-knob: #ffffff; /* Scrollbar */ --scrollbar-bg: #1a1a1a; --scrollbar-thumb: #444444; --scrollbar-thumb-hover: #555555; /* Cards & Panels */ --card-bg: #1a1a1a; --card-border: #333333; --card-hover: #2a2a2a; /* Navigation */ --nav-bg: rgba(0, 0, 0, 0.9); --nav-border: #333333; --nav-text: #cccccc; --nav-text-active: #00875A; /* Tables */ --table-header-bg: #1a1a1a; --table-row-bg: transparent; --table-row-alt-bg: rgba(255, 255, 255, 0.02); --table-row-hover: rgba(0, 135, 90, 0.1); --table-border: #333333; /* Charts & Data Visualization */ --chart-grid: #333333; --chart-axis: #666666; --chart-label: #888888; } /* ============================================ LIGHT THEME ============================================ */ [data-theme="light"] { /* Primary Background Colors */ --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --bg-tertiary: #e9ecef; --bg-hover: #dee2e6; --bg-elevated: #ffffff; /* Overlay & Backdrop */ --bg-overlay: rgba(255, 255, 255, 0.95); --bg-backdrop: rgba(0, 0, 0, 0.5); --bg-modal: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); /* Text Colors */ --text-primary: #212529; --text-secondary: #495057; --text-muted: #6c757d; --text-disabled: #adb5bd; --text-inverse: #ffffff; /* Accent Colors - Primary Brand Green */ --accent-primary: #00875A; --accent-hover: #006644; --accent-light: rgba(0, 135, 90, 0.12); --accent-lighter: rgba(0, 135, 90, 0.08); --accent-border: #00875A; /* Border Colors */ --border-primary: #dee2e6; --border-secondary: #ced4da; --border-light: #e9ecef; --border-focus: #00875A; /* Status Colors */ --color-error: #dc3545; --color-error-hover: #c82333; --color-error-bg: rgba(220, 53, 69, 0.1); --color-warning: #ffc107; --color-warning-bg: rgba(255, 193, 7, 0.12); --color-success: #00875A; --color-success-bg: rgba(0, 135, 90, 0.1); --color-info: #17a2b8; --color-info-bg: rgba(23, 162, 184, 0.1); /* Shadows */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.15); /* Gradients */ --gradient-bg: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); --gradient-overlay: linear-gradient(to top, rgba(255, 255, 255, 0.9), transparent); --gradient-divider: linear-gradient(90deg, transparent, #dee2e6, transparent); /* Form Elements */ --input-bg: #ffffff; --input-border: #ced4da; --input-border-focus: #00875A; --input-text: #212529; --input-placeholder: #6c757d; /* Toggle/Switch */ --toggle-bg: #ced4da; --toggle-bg-active: #00875A; --toggle-knob: #ffffff; /* Scrollbar */ --scrollbar-bg: #f8f9fa; --scrollbar-thumb: #ced4da; --scrollbar-thumb-hover: #adb5bd; /* Cards & Panels */ --card-bg: #ffffff; --card-border: #dee2e6; --card-hover: #f8f9fa; /* Navigation */ --nav-bg: rgba(255, 255, 255, 0.95); --nav-border: #dee2e6; --nav-text: #495057; --nav-text-active: #00875A; /* Tables */ --table-header-bg: #f8f9fa; --table-row-bg: transparent; --table-row-alt-bg: rgba(0, 0, 0, 0.02); --table-row-hover: rgba(0, 135, 90, 0.08); --table-border: #dee2e6; /* Charts & Data Visualization */ --chart-grid: #e9ecef; --chart-axis: #6c757d; --chart-label: #495057; } /* ============================================ HIGH CONTRAST MODE (Accessibility) Applies on top of current theme ============================================ */ .high-contrast { --text-primary: #ffffff !important; --text-secondary: #ffffff !important; --bg-primary: #000000 !important; --bg-secondary: #000000 !important; --border-primary: #ffffff !important; --accent-primary: #00ff88 !important; } [data-theme="light"].high-contrast { --text-primary: #000000 !important; --text-secondary: #000000 !important; --bg-primary: #ffffff !important; --bg-secondary: #ffffff !important; --border-primary: #000000 !important; --accent-primary: #005030 !important; } /* ============================================ LARGE TEXT MODE (Accessibility) ============================================ */ .large-text { --font-size-xs: 0.875rem; --font-size-sm: 1rem; --font-size-base: 1.125rem; --font-size-lg: 1.375rem; --font-size-xl: 1.625rem; --font-size-2xl: 2rem; --font-size-3xl: 2.5rem; } /* Default font sizes (when large-text is not active) */ :root { --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 2rem; } /* ============================================ UTILITY CLASSES ============================================ */ /* Theme transition - smooth color changes */ .theme-transition, .theme-transition * { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; } /* Disable transitions during theme load */ .no-transition, .no-transition * { transition: none !important; }