/* ============================================ MD7 Design System — Dark Mode Overrides ============================================ Navy-based dark palette using [data-theme='dark'] selector. All combinations verified for WCAG 2.1 AA contrast (4.5:1 text). Usage: Or with system preference: @media (prefers-color-scheme: dark) { ... } ============================================ */ [data-theme="dark"] { /* ========================================== BACKGROUNDS — Navy-based dark surfaces Light surfaces become deep navy tones. Elevation is conveyed by lighter navy shades. ========================================== */ --color-bg-1: #1A2733; /* navy-600 — primary surface */ --color-bg-2: #253746; /* navy — alternate sections */ --color-bg-3: #2F4456; /* lighter navy — nested surfaces, cards on alt */ --color-bg-inverse: #F7F5F2; /* paper — inverted "light" sections within dark */ --color-bg-ink: #111D27; /* deepest dark navy */ --color-bg-accent: var(--md7-orange); /* unchanged — orange remains orange */ /* ========================================== FOREGROUNDS — Light text on dark Near-white tones reduce glare vs pure #FFF. ========================================== */ --color-fg-1: #F0F0F0; /* primary text — headlines, emphasis */ --color-fg-2: #C8C8C8; /* body text */ --color-fg-3: #9C9C9C; /* tertiary — captions, meta (4.5:1 on bg-1) */ --color-fg-muted: #6E7E8C; /* muted UI elements */ --color-fg-inverse: #0A0A0A; /* text on inverted (light) surfaces */ --color-fg-accent: var(--md7-orange); /* brand orange stays — 5.6:1 on navy-600 */ /* ========================================== BORDERS — Subtle navy-tinted borders ========================================== */ --color-border: #3A5060; /* standard dividers & hairlines */ --color-border-strong: #5A7585; /* emphasized borders */ /* ========================================== COMPONENT SURFACE TOKENS Override named neutrals used by components. ========================================== */ --md7-white: #1A2733; /* "white" surfaces become navy-600 */ --md7-paper: #253746; /* "paper" sections become navy */ --md7-mist: #2F4456; /* subtle fills become lighter navy */ --md7-fog: #3A5060; /* hairlines lighten for visibility */ --md7-stone: #6E7E8C; /* muted elements */ --md7-ink: #111D27; /* ink stays dark (deepest surface) */ /* ========================================== STATUS COLORS — Slightly lighter tints for readability on dark backgrounds. All meet 4.5:1 AA contrast on bg-1/bg-2. ========================================== */ --color-success: #4CAF75; /* lighter green — 4.8:1 on #1A2733 */ --color-warning: #E0A030; /* lighter amber — 5.9:1 on #1A2733 */ --color-danger: #E06050; /* lighter red — 4.6:1 on #1A2733 */ --color-info: #5A9AE0; /* lighter blue — 4.7:1 on #1A2733 */ /* ========================================== SHADOWS — More subtle on dark surfaces. Use softer opacity and optional glow. ========================================== */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45); --shadow-orange: 0 12px 30px rgba(255, 103, 32, 0.12); } /* ============================================ BADGE OVERRIDES — Dark tinted backgrounds Light-tinted badge backgrounds are too bright on dark surfaces. Use dark-tinted variants. ============================================ */ [data-theme="dark"] .nx-badge { background: #2F4456; color: #C8C8C8; } [data-theme="dark"] .nx-badge-success { background: #1A3328; color: #6BC89A; } [data-theme="dark"] .nx-badge-warning { background: #332A18; color: #E8B050; } [data-theme="dark"] .nx-badge-danger { background: #331A18; color: #E87B70; } [data-theme="dark"] .nx-badge-info { background: #1A2D40; color: #70A8E8; } [data-theme="dark"] .nx-badge-orange { background: #3D2510; color: var(--md7-orange-300); } /* ============================================ ALERT OVERRIDES — Dark tinted backgrounds with adjusted text and border-left colors. ============================================ */ [data-theme="dark"] .nx-alert { background: #2F4456; color: #C8C8C8; border-left-color: #6E7E8C; } [data-theme="dark"] .nx-alert-success { background: #1A3328; color: #A8E6C3; border-left-color: #4CAF75; } [data-theme="dark"] .nx-alert-warning { background: #332A18; color: #F0D090; border-left-color: #D4962A; } [data-theme="dark"] .nx-alert-danger { background: #331A18; color: #F0A8A0; border-left-color: #D05A50; } [data-theme="dark"] .nx-alert-info { background: #1A2D40; color: #A0C8F0; border-left-color: #5090D0; } /* ============================================ TABLE OVERRIDES Striped rows & header backgrounds need dark variants. ============================================ */ [data-theme="dark"] .nx-table thead th { background: #253746; color: #9C9C9C; border-bottom-color: #3A5060; } [data-theme="dark"] .nx-table tbody tr:nth-child(even) { background: #253746; } [data-theme="dark"] .nx-table tbody tr:hover { background: #2F3D28; } [data-theme="dark"] .nx-table tbody td { border-bottom-color: #3A5060; } /* ============================================ FORM OVERRIDES Input backgrounds, placeholders, and disabled states for dark surfaces. ============================================ */ [data-theme="dark"] .nx-input, [data-theme="dark"] .nx-select, [data-theme="dark"] .nx-textarea { background: #253746; color: #F0F0F0; border-color: #3A5060; } [data-theme="dark"] .nx-input::placeholder, [data-theme="dark"] .nx-textarea::placeholder { color: #6E7E8C; } [data-theme="dark"] .nx-input:disabled, [data-theme="dark"] .nx-select:disabled, [data-theme="dark"] .nx-textarea:disabled { background: #2F4456; color: #6E7E8C; } [data-theme="dark"] .nx-checkbox input[type="checkbox"] { background: #253746; border-color: #5A7585; } [data-theme="dark"] .nx-radio input[type="radio"] { background: #253746; border-color: #5A7585; } /* ============================================ CARD OVERRIDES Cards use slightly elevated surface. ============================================ */ [data-theme="dark"] .nx-card { background: #253746; } [data-theme="dark"] .nx-card-header { border-bottom-color: #3A5060; } [data-theme="dark"] .nx-card-footer { border-top-color: #3A5060; } [data-theme="dark"] .nx-stat-card { background: #253746; } [data-theme="dark"] .nx-card-img { background-color: #2F4456; } /* ============================================ MODAL OVERRIDES ============================================ */ [data-theme="dark"] .nx-modal-backdrop { background: rgba(0, 0, 0, 0.65); } [data-theme="dark"] .nx-modal { background: #253746; } [data-theme="dark"] .nx-modal-header { border-bottom-color: #3A5060; } [data-theme="dark"] .nx-modal-footer { border-top-color: #3A5060; } [data-theme="dark"] .nx-modal-close:hover { background: #2F4456; } /* ============================================ BUTTON OVERRIDES Primary/secondary stay the same. Ghost adapts border and text for dark. ============================================ */ [data-theme="dark"] .btn-ghost { color: #F0F0F0; border-color: #3A5060; } [data-theme="dark"] .btn-ghost:active { background: rgba(255, 103, 32, 0.10); } [data-theme="dark"] .btn-ghost:disabled, [data-theme="dark"] .btn-ghost[disabled] { border-color: #2F4456; color: #6E7E8C; } [data-theme="dark"] .btn-icon { border-color: #3A5060; color: #C8C8C8; } [data-theme="dark"] .btn-icon:hover { background: rgba(255, 103, 32, 0.10); } [data-theme="dark"] .btn-secondary:disabled, [data-theme="dark"] .btn-secondary[disabled] { background: #2F4456; color: #6E7E8C; } /* ============================================ NAVIGATION OVERRIDES ============================================ */ [data-theme="dark"] .nx-nav-item:hover { background: #2F4456; color: #F0F0F0; } [data-theme="dark"] .nx-nav-active, [data-theme="dark"] .nx-nav-item.nx-nav-active { background: rgba(255, 103, 32, 0.10); } [data-theme="dark"] .nx-tab-bar { border-bottom-color: #3A5060; } /* ============================================ TOOLTIP OVERRIDES Invert: light tooltip on dark background. ============================================ */ [data-theme="dark"] [data-tooltip]::after { background: #F0F0F0; color: #1A2733; } /* ============================================ SKELETON / LOADING OVERRIDES ============================================ */ [data-theme="dark"] .nx-skeleton { background: linear-gradient( 90deg, #2F4456 25%, #3A5060 50%, #2F4456 75% ); background-size: 200% 100%; } [data-theme="dark"] .nx-spinner { border-color: #2F4456; border-top-color: var(--md7-orange); } /* ============================================ SELECTION & FOCUS ============================================ */ [data-theme="dark"] ::selection { background: var(--md7-orange); color: #FFFFFF; } /* ============================================ DIVIDER OVERRIDE ============================================ */ [data-theme="dark"] .nx-divider { border-top-color: #3A5060; } /* ============================================ PROGRESS BAR OVERRIDE ============================================ */ [data-theme="dark"] .nx-progress-bar { background: #2F4456; } /* ============================================ AVATAR OVERRIDE ============================================ */ [data-theme="dark"] .nx-avatar { background: #3D2510; color: var(--md7-orange-300); } /* ============================================ SYSTEM PREFERENCE — Auto dark mode Mirrors the [data-theme="dark"] overrides for users who prefer dark at the OS level. ============================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg-1: #1A2733; --color-bg-2: #253746; --color-bg-3: #2F4456; --color-bg-inverse: #F7F5F2; --color-bg-ink: #111D27; --color-bg-accent: var(--md7-orange); --color-fg-1: #F0F0F0; --color-fg-2: #C8C8C8; --color-fg-3: #9C9C9C; --color-fg-muted: #6E7E8C; --color-fg-inverse: #0A0A0A; --color-fg-accent: var(--md7-orange); --color-border: #3A5060; --color-border-strong: #5A7585; --md7-white: #1A2733; --md7-paper: #253746; --md7-mist: #2F4456; --md7-fog: #3A5060; --md7-stone: #6E7E8C; --md7-ink: #111D27; --color-success: #4CAF75; --color-warning: #E0A030; --color-danger: #E06050; --color-info: #5A9AE0; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45); --shadow-orange: 0 12px 30px rgba(255, 103, 32, 0.12); } }