/* * Digital Reef — Dark Mode Theme * * Activates via: * 1. data-theme="dark" attribute on or * 2. Automatic via prefers-color-scheme media query * * Usage: * * * * Toggle with JS: * document.documentElement.setAttribute('data-theme', 'dark'); */ [data-theme="dark"] { /* ─── Backgrounds ─── */ --dr-bg-page: #1A1F1C; --dr-bg-card: #2A2F2C; --dr-bg-elevated: #333A36; --dr-bg-accent: #3E4843; --dr-bg-dark: #0F1210; --dr-bg-deep: #2A2230; /* ─── Text ─── */ --dr-text-primary: #F3E9DE; --dr-text-secondary: #D0D9A3; --dr-text-muted: #8AA382; --dr-text-on-dark: #F3E9DE; /* ─── Borders ─── */ --dr-border-default: #3E4843; --dr-border-subtle: #333A36; /* ─── Interactive ─── */ --dr-link: #89B1CC; --dr-link-hover: #C1D7E9; --dr-action-primary: #6B8F5A; --dr-action-secondary: #5A94B8; --dr-action-warm: #D46B4A; /* ─── Semantic ─── */ --dr-success: #6B8F5A; --dr-warning: #F2E280; --dr-danger: #D46B4A; --dr-info: #5A94B8; /* ─── Gradients ─── */ --dr-gradient-forest-depth: linear-gradient(135deg, #1A1F1C 0%, #2A3A25 50%, #3E4843 100%); --dr-gradient-coastal-mist: linear-gradient(135deg, #1E3A4A 0%, #2A4A5A 50%, #3A5A6A 100%); --dr-gradient-golden-hour: linear-gradient(135deg, #5A3020 0%, #4A4020 100%); --dr-gradient-nz-landscape: linear-gradient(180deg, #2A4A5A 0%, #2A3A25 40%, #1A2A1C 70%, #1A1F1C 100%); --dr-gradient-earth-tone: linear-gradient(135deg, #2A2230 0%, #1A1F1C 50%, #2A3A25 100%); /* ─── Severity Tokens ─── */ --dr-severity-info: #60A5FA; --dr-severity-info-bg: #1E2840; --dr-severity-info-border: #2563EB; --dr-severity-info-text: #93C5FD; --dr-severity-low: #4ADE80; --dr-severity-low-bg: #1A2E1A; --dr-severity-low-border: #16A34A; --dr-severity-low-text: #86EFAC; --dr-severity-medium: #FBBF24; --dr-severity-medium-bg: #2E2410; --dr-severity-medium-border: #D97706; --dr-severity-medium-text: #FCD34D; --dr-severity-high: #FB923C; --dr-severity-high-bg: #2E1A10; --dr-severity-high-border: #EA580C; --dr-severity-high-text: #FDBA74; --dr-severity-critical: #F87171; --dr-severity-critical-bg: #611C1C; --dr-severity-critical-border: #DC2626; --dr-severity-critical-text: #FFFFFF; --dr-severity-emergency: #FFFFFF; --dr-severity-emergency-bg: #7F1D1D; --dr-severity-emergency-border: #991B1B; --dr-severity-emergency-text: #FFFFFF; /* ─── Status Tokens ─── */ --dr-status-draft: #9CA3AF; --dr-status-draft-bg: #1F2024; --dr-status-pending: #A78BFA; --dr-status-pending-bg: #1E1830; --dr-status-active: #60A5FA; --dr-status-active-bg: #1E2840; --dr-status-paused: #FBBF24; --dr-status-paused-bg: #2E2410; --dr-status-complete: #4ADE80; --dr-status-complete-bg: #1A2E1A; --dr-status-archived: #D1D5DB; --dr-status-archived-bg: #1F2024; --dr-status-cancelled: #F87171; --dr-status-cancelled-bg: #2E1A1A; /* ─── Source Category Tokens ─── */ --dr-source-gazette: #3B82F6; --dr-source-lga: #10B981; --dr-source-fta: #A78BFA; --dr-source-council: #38BDF8; --dr-source-media: #F472B6; --dr-source-community: #FB923C; /* ─── Domain Tokens ─── */ --dr-domain-environment: #4ADE80; --dr-domain-planning: #60A5FA; --dr-domain-transport: #FBBF24; --dr-domain-health: #F87171; --dr-domain-recreation: #22D3EE; --dr-domain-infrastructure: #A78BFA; --dr-domain-governance: #9CA3AF; --dr-domain-finance: #FACC15; /* ─── Shadows (darker for dark mode) ─── */ --dr-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2); --dr-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2); --dr-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2); --dr-shadow-forest-glow: 0 0 20px rgba(107, 143, 90, 0.3); --dr-shadow-coastal-glow: 0 0 20px rgba(90, 148, 184, 0.3); --dr-shadow-clay-glow: 0 0 20px rgba(212, 107, 74, 0.3); color-scheme: dark; } /* Auto dark mode for users who haven't set a preference */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dr-bg-page: #1A1F1C; --dr-bg-card: #2A2F2C; --dr-bg-elevated: #333A36; --dr-bg-accent: #3E4843; --dr-bg-dark: #0F1210; --dr-bg-deep: #2A2230; --dr-text-primary: #F3E9DE; --dr-text-secondary: #D0D9A3; --dr-text-muted: #8AA382; --dr-text-on-dark: #F3E9DE; --dr-link: #89B1CC; --dr-link-hover: #C1D7E9; --dr-action-primary: #6B8F5A; --dr-action-secondary: #5A94B8; --dr-action-warm: #D46B4A; --dr-success: #6B8F5A; --dr-warning: #F2E280; --dr-danger: #D46B4A; --dr-info: #5A94B8; --dr-gradient-forest-depth: linear-gradient(135deg, #1A1F1C 0%, #2A3A25 50%, #3E4843 100%); --dr-gradient-coastal-mist: linear-gradient(135deg, #1E3A4A 0%, #2A4A5A 50%, #3A5A6A 100%); --dr-gradient-golden-hour: linear-gradient(135deg, #5A3020 0%, #4A4020 100%); --dr-gradient-nz-landscape: linear-gradient(180deg, #2A4A5A 0%, #2A3A25 40%, #1A2A1C 70%, #1A1F1C 100%); --dr-gradient-earth-tone: linear-gradient(135deg, #2A2230 0%, #1A1F1C 50%, #2A3A25 100%); /* ─── Severity Tokens ─── */ --dr-severity-info: #60A5FA; --dr-severity-info-bg: #1E2840; --dr-severity-info-border: #2563EB; --dr-severity-info-text: #93C5FD; --dr-severity-low: #4ADE80; --dr-severity-low-bg: #1A2E1A; --dr-severity-low-border: #16A34A; --dr-severity-low-text: #86EFAC; --dr-severity-medium: #FBBF24; --dr-severity-medium-bg: #2E2410; --dr-severity-medium-border: #D97706; --dr-severity-medium-text: #FCD34D; --dr-severity-high: #FB923C; --dr-severity-high-bg: #2E1A10; --dr-severity-high-border: #EA580C; --dr-severity-high-text: #FDBA74; --dr-severity-critical: #F87171; --dr-severity-critical-bg: #2E1A1A; --dr-severity-critical-border: #DC2626; --dr-severity-critical-text: #FCA5A5; --dr-severity-emergency: #FFFFFF; --dr-severity-emergency-bg: #7F1D1D; --dr-severity-emergency-border: #991B1B; --dr-severity-emergency-text: #FFFFFF; /* ─── Status Tokens ─── */ --dr-status-draft: #9CA3AF; --dr-status-draft-bg: #1F2024; --dr-status-pending: #A78BFA; --dr-status-pending-bg: #1E1830; --dr-status-active: #60A5FA; --dr-status-active-bg: #1E2840; --dr-status-paused: #FBBF24; --dr-status-paused-bg: #2E2410; --dr-status-complete: #4ADE80; --dr-status-complete-bg: #1A2E1A; --dr-status-archived: #D1D5DB; --dr-status-archived-bg: #1F2024; --dr-status-cancelled: #F87171; --dr-status-cancelled-bg: #2E1A1A; /* ─── Source Category Tokens ─── */ --dr-source-gazette: #3B82F6; --dr-source-lga: #10B981; --dr-source-fta: #A78BFA; --dr-source-council: #38BDF8; --dr-source-media: #F472B6; --dr-source-community: #FB923C; /* ─── Domain Tokens ─── */ --dr-domain-environment: #4ADE80; --dr-domain-planning: #60A5FA; --dr-domain-transport: #FBBF24; --dr-domain-health: #F87171; --dr-domain-recreation: #22D3EE; --dr-domain-infrastructure: #A78BFA; --dr-domain-governance: #9CA3AF; --dr-domain-finance: #FACC15; --dr-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2); --dr-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2); --dr-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2); --dr-shadow-forest-glow: 0 0 20px rgba(107, 143, 90, 0.3); --dr-shadow-coastal-glow: 0 0 20px rgba(90, 148, 184, 0.3); --dr-shadow-clay-glow: 0 0 20px rgba(212, 107, 74, 0.3); color-scheme: dark; } }