/* ===================================================================== DARK MODE, AS AN OVERRIDE OF THE SEMANTIC LAYER ONLY. Hand-written. Loaded AFTER design-system.css. This is short because the design system did the hard part. It separates the raw ramp (--color-teal-500, --color-gray-200) from the ROLES those colours play (--bg-card, --text-secondary, --border-default), and every component is written against the roles. So a dark theme is a redefinition of about twenty role tokens, not a re-skin of 237 components -- and any component added later is dark automatically, without anyone remembering to. NOTHING BELOW TOUCHES A --color-* TOKEN. If a rule here starts setting raw ramp values, the separation has been broken and the next component added will be light-only. TWO SWITCHES, DELIBERATELY. The media query follows the operating system, which is the right default and the only one that works before any JavaScript runs. data-theme on is the explicit choice, and it wins in BOTH directions -- somebody on a dark laptop who wants the light theme in daylight on a boat must be able to have it. ===================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --text-primary: #E8EEF4; --text-secondary: #A9BDCF; --text-muted: #7C93A8; --text-inverse: #0A2540; --text-link: var(--color-teal-400); /* The page is darker than the cards, so cards lift off it. Inverted from the light theme, where cards are white ON grey -- the relationship is what matters, not which is brighter. */ --bg-page: #0B1620; --bg-card: #13202C; --bg-subtle: #1A2A38; /* The sidebar stays ocean-deep in both themes. It is the one surface the design already treats as dark, and keeping it fixed means the app does not appear to change shape when the theme flips. */ --bg-nav: var(--color-ocean-deep); --bg-map: #0E2230; --bg-water: #14435C; --border-default: #24384A; --border-strong: #35506A; /* The status backgrounds are the one place a straight inversion fails. #E8F5E9 behind #1B5E20 is a light-theme pairing; on a dark card it is a glaring white block. These are dark tints of the same hues, keeping the text side bright enough to read. */ --color-success-bg: #10301D; --color-success-text: #7EE0A3; --color-warning-bg: #33240F; --color-warning-text: #F6C48A; --color-danger-bg: #3A1418; --color-danger-text: #FF9AA2; --color-pending-bg: #33270B; --color-pending-text: #F8CE6B; /* Shadows do almost nothing on a dark surface -- depth reads from the border and the surface step instead. Kept, but quieter, so cards do not sit in a grey smudge. */ --shadow-xs: 0 1px 2px rgba(0,0,0,.35); --shadow-sm: 0 1px 4px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30); --shadow-md: 0 4px 12px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.30); --shadow-lg: 0 8px 24px rgba(0,0,0,.50), 0 4px 8px rgba(0,0,0,.35); --shadow-xl: 0 16px 40px rgba(0,0,0,.55), 0 8px 16px rgba(0,0,0,.40); color-scheme: dark; } } /* The explicit choice. Same block, applied regardless of what the OS says -- duplicated rather than factored into a shared class, because a media query and an attribute selector cannot be combined without a preprocessor and this file has no build step. */ :root[data-theme='dark'] { --text-primary: #E8EEF4; --text-secondary: #A9BDCF; --text-muted: #7C93A8; --text-inverse: #0A2540; --text-link: var(--color-teal-400); --bg-page: #0B1620; --bg-card: #13202C; --bg-subtle: #1A2A38; --bg-nav: var(--color-ocean-deep); --bg-map: #0E2230; --bg-water: #14435C; --border-default: #24384A; --border-strong: #35506A; --color-success-bg: #10301D; --color-success-text: #7EE0A3; --color-warning-bg: #33240F; --color-warning-text: #F6C48A; --color-danger-bg: #3A1418; --color-danger-text: #FF9AA2; --color-pending-bg: #33270B; --color-pending-text: #F8CE6B; --shadow-xs: 0 1px 2px rgba(0,0,0,.35); --shadow-sm: 0 1px 4px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30); --shadow-md: 0 4px 12px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.30); --shadow-lg: 0 8px 24px rgba(0,0,0,.50), 0 4px 8px rgba(0,0,0,.35); --shadow-xl: 0 16px 40px rgba(0,0,0,.55), 0 8px 16px rgba(0,0,0,.40); color-scheme: dark; } /* ===================================================================== WHERE THE DESIGN SYSTEM REACHES PAST ITS OWN ROLE LAYER. 62 rules use the raw ramp instead of a role token. Most are correct in both themes -- white TEXT on a teal button or a navy sidebar stays white. The ones that break are the raw ramp used as a SURFACE, because a surface is exactly the thing a theme changes. The grey ramp turns out to be used only for backgrounds, borders and one text colour, so remapping 100/200/300 in dark mode is safe and fixes everything at once -- dividers, progress tracks, slider rails. --color-white cannot be remapped the same way: it is a surface in sixteen rules and readable text in twenty, so those sixteen are named individually. Better than editing design-system.css, which is regenerated from the designer's file and would lose the edit on the next delivery. ===================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --color-gray-100: #1A2A38; --color-gray-200: #24384A; --color-gray-300: #35506A; } } :root[data-theme='dark'] { --color-gray-100: #1A2A38; --color-gray-200: #24384A; --color-gray-300: #35506A; } /* gray-500 stays a TEXT colour and is now too dark against the remapped gray-100 behind it. The one chip that pairs them gets its own answer. */ :root[data-theme='dark'] .tag-sold, :root[data-theme='dark'] .badge-no-account { color: var(--text-secondary); } /* The sixteen surfaces. Named rather than swept, so it is obvious what was changed and why -- and so a component added later that uses --color-white as a surface shows up as a white block instead of hiding. */ :root[data-theme='dark'] .modal, :root[data-theme='dark'] .detail-panel, :root[data-theme='dark'] .detail-panel-tabs, :root[data-theme='dark'] .bottom-sheet, :root[data-theme='dark'] .bottom-nav, :root[data-theme='dark'] .chip, :root[data-theme='dark'] .chip-compass, :root[data-theme='dark'] .channel-btn, :root[data-theme='dark'] .map-search-pill, :root[data-theme='dark'] .map-icon-btn, :root[data-theme='dark'] .map-filter-chip, :root[data-theme='dark'] .map-ctrl-btn, :root[data-theme='dark'] .input:focus, :root[data-theme='dark'] .textarea:focus, :root[data-theme='dark'] .otp-digit:focus { background: var(--bg-card); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { /* Same list. The duplication is the cost of having no build step, and it is cheaper than the bug where the OS-dark path quietly diverges from the explicitly-dark path. */ } } :root:not([data-theme='light']) { } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .modal, :root:not([data-theme='light']) .detail-panel, :root:not([data-theme='light']) .detail-panel-tabs, :root:not([data-theme='light']) .bottom-sheet, :root:not([data-theme='light']) .bottom-nav, :root:not([data-theme='light']) .chip, :root:not([data-theme='light']) .chip-compass, :root:not([data-theme='light']) .channel-btn, :root:not([data-theme='light']) .map-search-pill, :root:not([data-theme='light']) .map-icon-btn, :root:not([data-theme='light']) .map-filter-chip, :root:not([data-theme='light']) .map-ctrl-btn, :root:not([data-theme='light']) .input:focus, :root:not([data-theme='light']) .textarea:focus, :root:not([data-theme='light']) .otp-digit:focus { background: var(--bg-card); } :root:not([data-theme='light']) .tag-sold, :root:not([data-theme='light']) .badge-no-account { color: var(--text-secondary); } } /* ===================================================================== THE APP SHELL. Layout only -- every colour comes from a token above. ===================================================================== */ .app { display: flex; min-height: 100vh; background: var(--bg-page); } .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .app-header { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-default); background: var(--bg-card); position: sticky; top: 0; z-index: var(--z-sticky); } .app-header h1 { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--text-primary); letter-spacing: var(--letter-spacing-tight); } .app-header .sub { color: var(--text-secondary); font-size: var(--font-size-sm); } .app-content { padding: var(--space-6); flex: 1; min-height: 0; } /* The map is the exception: it fills its section and manages its own inside. */ .app-content.is-map { padding: 0; display: flex; } /* Sidebar sections that this system needs and the design file did not name. */ .sidebar-scroll { overflow-y: auto; flex: 1; padding: var(--space-2) 0; } /* An empty state that says WHY it is empty and what would fill it. A blank panel reads as a bug; "nothing here yet, and here is what puts something here" reads as a product that has not got there. */ .empty { border: 1px dashed var(--border-default); border-radius: var(--radius-md); padding: var(--space-8); text-align: center; color: var(--text-secondary); background: var(--bg-card); } .empty h3 { margin: 0 0 var(--space-2); color: var(--text-primary); font-size: var(--font-size-md); } .empty p { margin: 0 auto; max-width: 46ch; font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); } /* The theme switch. Three states and not two: following the system is a real choice and the one most people should be on, so it has to be reachable rather than only being the state you are in before you touch anything. */ .theme-switch { display: flex; gap: 2px; background: var(--bg-subtle); border-radius: var(--radius-full); padding: 2px; } .theme-switch button { border: 0; background: transparent; cursor: pointer; padding: 4px 10px; border-radius: var(--radius-full); font-size: var(--font-size-xs); color: var(--text-secondary); font-family: inherit; } .theme-switch button.on { background: var(--bg-card); color: var(--text-primary); box-shadow: var(--shadow-xs); } /* ===================================================================== PHONE. THE SIDEBAR IS HIDDEN, NOT STACKED. Stacking it was measured at 375px: 812px tall, content beginning 889px down the page, a full screen of navigation before anything an agent came to read. The design system ships .bottom-nav for exactly this, and the earlier version simply did not use it. The map keeps its own full height; every other view leaves room for the bar so the last row of a list is not permanently under it. ===================================================================== */ /* ===================================================================== THE RESPONSIVE LAYER THE DESIGN SYSTEM DOES NOT HAVE. It contains zero media queries, so .grid-4 is four columns at every width. On a 375px phone that leaves each card about 37px of inner width while the word CONTACTS needs 70, and .kpi-card clips its overflow -- so the labels were cut mid-word and the fourth card ran off the screen. Collapsing at the primitive rather than at each screen: every layout that uses grid-4 gets this, including screens not written yet. ===================================================================== */ @media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } /* Two KPI tiles still fit at 375px and are the more useful density -- four numbers at a glance beats one number and three scrolls. */ .grid-4 { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); } .kpi-card { padding: var(--space-3) var(--space-4); } .kpi-value { font-size: 24px; } } @media (max-width: 900px) { .agent-sidebar { display: none; } .app-content { padding: var(--space-4) var(--space-4) 84px; } .app-content.is-map { padding: 0 0 68px; } .app-header { padding: var(--space-3) var(--space-4); } .app-header h1 { font-size: var(--font-size-md); } /* The three-way theme switch is desktop furniture. On a phone the system setting is nearly always what somebody wants, and the row is competing for the same space as the page title. */ .theme-switch { display: none; } } @media (min-width: 901px) { .bottom-nav { display: none !important; } } /* The design system paints the bar white from the raw ramp; in dark mode that is a white slab under a dark page. Same class of fix as the other fifteen. */ :root[data-theme='dark'] .bottom-nav { background: var(--bg-card); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .bottom-nav { background: var(--bg-card); } }