/* ============================================================ MIDNIGHT — sister-app palette for MOAD. Activated when . Inverts ink/paper relationship; keeps brand orange but re-tones accents for deep, saturated dark surfaces. ============================================================ */ body[data-theme="midnight"] { /* Inverted surface palette */ --paper: #0E1422; /* deep midnight */ --paper-2: #1A2235; --paper-3: #242E47; /* Type/UI becomes light */ --ink: #E8EDF6; --ink-2: #C7D1E2; --ink-soft: rgba(232, 237, 246, 0.10); /* Accents — slightly lifted for dark contrast */ --azure: #5C97EE; --azure-2: #7AAEF5; --sky: #9FD3E8; --butter: var(--sky); --lilac: #D2C0EC; /* Accent RGB channels — midnight values of the accents above. MUST track the hex values above (P3.1, 2026-07-08). */ --azure-rgb: 92, 151, 238; --azure-2-rgb: 122, 174, 245; --sky-rgb: 159, 211, 232; --lilac-rgb: 210, 192, 236; /* Sky-surface gradient stops — the cyan-sky family used on surf--sky / surf--butter / card--sky / card--butter. Shift these three and every sky surface in the app retunes. */ --sky-grad-1: #9FD3E8; /* top-left · brightest cyan-sky */ --sky-grad-2: #6FB5D6; /* mid 55% · sky body */ --sky-grad-3: #62A6C8; /* bottom-rt · shaded sky */ --sky-gradient: linear-gradient(135deg, var(--sky-grad-1) 0%, var(--sky-grad-2) 55%, var(--sky-grad-3) 100%); /* Loud variant (surf--sky-loud) — mist-azure inverted, edges toward azure. For marketing / hero surfaces wanting extra depth. */ --sky-gradient-loud: linear-gradient(135deg, rgba(142, 202, 230, 0.96) 0%, rgba(95, 165, 200, 0.96) 55%, rgba(61, 125, 219, 0.88) 100%); /* @kind color */ /* Orange holds — it IS the brand */ --orange: #FF6A2C; --orange-2: #FF8754; --orange-soft: rgba(255, 106, 44, 0.18); --silver: #4A5670; --silver-2: #6D7896; --coin-deep: #050810; --fg: var(--ink); --fg-2: #B6C0D5; --fg-muted: #94A1BB; --bg: var(--paper); --line: var(--ink); --b: 2px solid var(--ink); --b-thin: 1.5px solid var(--ink); --sh: 4px 4px 0 var(--ink); --sh-press: 2px 2px 0 var(--ink); --sh-lg: 6px 6px 0 var(--ink); --sh-soft: 0 8px 24px rgba(0, 0, 0, 0.4); } /* The theme switch lives on , so keeps the light :root --bg (#EEF3F8) and flashes light on scroll-momentum / overscroll (rubber-banding) over every dark screen. Re-theme the root surface when the body is midnight so the area beyond content stays dark. */ :root:has(body[data-theme="midnight"]) { background: #0E1422; } /* Backgrounds re-tinted for midnight */ body[data-theme="midnight"][data-bg="blueprint"] { background-color: var(--paper); background-image: radial-gradient(rgba(232, 237, 246, calc(var(--grid-dot, 0.16) * var(--grid-opacity, 1))) 1px, transparent 1px), linear-gradient(rgba(92, 151, 238, calc(var(--grid-line, 0.10) * var(--grid-opacity, 1))) 1px, transparent 1px), linear-gradient(90deg, rgba(92, 151, 238, calc(var(--grid-line, 0.10) * var(--grid-opacity, 1))) 1px, transparent 1px); background-size: 6px 6px, 56px 56px, 56px 56px; } body[data-theme="midnight"][data-bg="solid"] { background-color: var(--paper); background-image: none; } body[data-theme="midnight"][data-bg="cream"], body[data-theme="midnight"][data-bg="newsprint"], body[data-theme="midnight"][data-bg="linen"], body[data-theme="midnight"][data-bg="concrete"] { /* fall back to deep midnight for non-blueprint bgs */ background-color: var(--paper); background-image: radial-gradient(rgba(232, 237, 246, 0.04) 1px, transparent 1px); background-size: 4px 4px; } /* Ambient highlight overlay — invert blend for dark */ body[data-theme="midnight"]::before { background: radial-gradient(ellipse 55% 45% at var(--amb-x, 50%) var(--amb-y, 45%), rgba(92, 151, 238, 0.18) 0%, rgba(92, 151, 238, 0.06) 35%, transparent 70%); mix-blend-mode: screen; } /* Rail tint — slightly lifted black so it reads as a panel */ body[data-theme="midnight"] .rail { background: #060A14; border-right: 2px solid #060A14; } body[data-theme="midnight"] .rail-brand { background: var(--ink-2); border-color: var(--ink-2); } body[data-theme="midnight"] .rail-brand::before { opacity: 0.95; } body[data-theme="midnight"] .rail-brand-letter { color: white; } body[data-theme="midnight"] .rail-sep { background: rgba(255,255,255,0.06); } /* Topbar — translucent dark glass */ body[data-theme="midnight"] .topbar { background: rgba(14, 20, 34, 0.78); border-bottom: 2px solid #050810; } body[data-theme="midnight"] .topbar-title { color: var(--ink); } body[data-theme="midnight"] .topbar-crumb { color: var(--fg-muted); } body[data-theme="midnight"] .topbar-search { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: var(--fg-muted); box-shadow: 2px 2px 0 #050810; } /* Cards / surfaces — dark with subtle shadow */ body[data-theme="midnight"] .card, body[data-theme="midnight"] .surf { background: var(--paper-2); border-color: #050810; box-shadow: 4px 4px 0 #050810, 0 4px 18px rgba(0,0,0,0.35); color: var(--ink); } body[data-theme="midnight"] .surf--paper2 { background: var(--paper-3); } body[data-theme="midnight"] .card--paper2 { background: var(--paper-3); } /* Ink surfaces (deep dark) — keep contrast pop */ body[data-theme="midnight"] .surf--ink, body[data-theme="midnight"] .card--ink { background: #050810; color: var(--ink); border-color: #050810; } /* Accent surfaces */ body[data-theme="midnight"] .surf--azure, body[data-theme="midnight"] .card--azure { background: #2F5BB0; color: white; border-color: #050810; } body[data-theme="midnight"] .surf--lilac, body[data-theme="midnight"] .card--lilac { background: #6B5A98; color: var(--ink); border-color: #050810; } /* Sky / butter — the "thriving / flight" surface in midnight. B-gradient (default): same cyan-sky hue family, diagonal shade top-left bright → bottom-right shaded. Stays in the sky tonal family so the surface still reads as flight, not as deep azure. Driven by --sky-gradient (and the three --sky-grad-1/2/3 stops) defined on body[data-theme="midnight"] — shift those tokens and every sky surface in the app retunes from one place. */ body[data-theme="midnight"] .surf--butter, body[data-theme="midnight"] .surf--sky, body[data-theme="midnight"] .card--butter, body[data-theme="midnight"] .card--sky { background: var(--sky-gradient); color: #0E1422; border-color: #050810; } /* Loud variant — D-gradient: mist-azure dropzone inverted to opaque high-saturation. Driven by --sky-gradient-loud. Reserve for marketing / feature / hero surfaces where extra depth is the point. Use class="surf surf--sky surf--sky-loud". */ body[data-theme="midnight"] .surf--sky-loud, body[data-theme="midnight"] .card--sky-loud { background: var(--sky-gradient-loud); } /* Sky · blueprint overlay (utility) — sky gradient + a subtle ink dot-grid + 56px cross-hair lines, echoing the dark canvas motif. The blueprint texture justifies the diagonal shade as a "printed plan / data sheet" character. Apply selectively where the motif feels right (currently: screen 07 Pacing, screen 13 Anti-AI trust). Use class="surf surf--sky surf--sky-print" (or surf--butter). */ body[data-theme="midnight"] .surf--sky-print, body[data-theme="midnight"] .card--sky-print { background-image: radial-gradient(rgba(14, 20, 34, 0.16) 1px, transparent 1px), linear-gradient(rgba(14, 20, 34, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 20, 34, 0.08) 1px, transparent 1px), var(--sky-gradient); background-size: 6px 6px, 56px 56px, 56px 56px, 100% 100%; background-position: 0 0, 0 0, 0 0, 0 0; } /* Inputs */ body[data-theme="midnight"] .input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: var(--ink); box-shadow: 4px 4px 0 #050810; } /* Buttons (ghost variant needs dark adaptation) */ body[data-theme="midnight"] .btn { border-color: #050810; box-shadow: 4px 4px 0 #050810; } body[data-theme="midnight"] .btn--ghost { background: rgba(255,255,255,0.08); color: var(--ink); border-color: rgba(255,255,255,0.25); } body[data-theme="midnight"] .btn--ghost:hover { background: var(--azure); color: white; } /* Tags */ body[data-theme="midnight"] .tag { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); color: var(--ink); } body[data-theme="midnight"] .tag--ghost { background: transparent; border-color: rgba(255,255,255,0.2); color: var(--fg-2); } /* Colored tag chips — lock to light-mode palette so they pop on the dark canvas with consistent meaning across the app. */ body[data-theme="midnight"] .tag--orange { background: #FF5005; color: white; border-color: #050810; } body[data-theme="midnight"] .tag--azure { background: #3D7DDB; color: white; border-color: #050810; } body[data-theme="midnight"] .tag--ink { background: #142033; color: #EEF3F8; border-color: #050810; } body[data-theme="midnight"] .tag--lilac { background: #C8B5E5; color: #142033; border-color: #050810; } body[data-theme="midnight"] .tag--butter, body[data-theme="midnight"] .tag--sky { background: #8ECAE6; color: #142033; border-color: #050810; } body[data-theme="midnight"] .tag--paper { background: #E2EAF2; color: #142033; border-color: #050810; } /* Node map (deployment + paths) — colored variants are defined with literal hex gradients in app.css so they look identical in both themes. Only the neutral .node-dot base needs theme adjustment. */ body[data-theme="midnight"] .node-dot { border-color: #050810; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.28), inset 0 -3px 8px rgba(0, 0, 0, 0.12), 3px 3px 0 #050810; } body[data-theme="midnight"] .node-dot--gray { background: linear-gradient(160deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%); color: var(--fg-muted); border-color: rgba(255,255,255,0.18); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.1), inset 0 -2px 6px rgba(0, 0, 0, 0.25), 2px 2px 0 rgba(0, 0, 0, 0.4); } /* Node labels — keep the light-mode pill style so the whole node visualization stays coherent: light pill, dark text, dark border. */ body[data-theme="midnight"] .node-label { background: #EEF3F8; color: #142033; border-color: #142033; } body[data-theme="midnight"] .edge path { stroke: rgba(255,255,255,0.25); } /* Calendar orbit days */ body[data-theme="midnight"] .orbit-day { background: var(--paper-3); border-color: #050810; box-shadow: 3px 3px 0 #050810; } body[data-theme="midnight"] .orbit-day-num { color: var(--ink); } body[data-theme="midnight"] .orbit-day-tag { color: var(--fg-muted); } /* Clock face — Launch Clock (Screen 07) */ body[data-theme="midnight"] .clock-orbit { background: radial-gradient(circle at center, rgba(92,151,238,0.12) 0, transparent 55%), var(--paper-2); } /* Day pill rollover tooltip in midnight */ body[data-theme="midnight"] .orbit-day-tip { background: #050810; color: #EEF3F8; border-color: rgba(255, 255, 255, 0.30); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5), 0 12px 28px rgba(0, 0, 0, 0.45); } body[data-theme="midnight"] .orbit-day-tip::after { background: #050810; border-color: rgba(255, 255, 255, 0.30); } body[data-theme="midnight"] .orbit-day-tip-what { color: #EEF3F8; } body[data-theme="midnight"] .orbit-day-tip-meta { color: rgba(238, 243, 248, 0.55); } /* Stat blocks */ body[data-theme="midnight"] .stat { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.16); } body[data-theme="midnight"] .stat-value { color: var(--ink); } body[data-theme="midnight"] .stat-label { color: var(--fg-muted); } /* Lane cards */ body[data-theme="midnight"] .lane-card { background: var(--paper-2); border-color: #050810; box-shadow: 4px 4px 0 #050810; color: var(--ink); } /* Toasts */ body[data-theme="midnight"] .toast { background: var(--paper-3); color: var(--ink); border-color: #050810; box-shadow: 4px 4px 0 #050810, 0 12px 24px rgba(0,0,0,0.4); } body[data-theme="midnight"] .toast--ink { background: #050810; color: var(--ink); } /* Modal */ body[data-theme="midnight"] .modal-shell { /* hook if needed */ } /* Live pill */ body[data-theme="midnight"] .live-pill { background: #050810; color: var(--ink); } /* Pulse / pulse-dot — orange holds */ /* Selection */ body[data-theme="midnight"] ::selection { background: var(--orange); color: white; } /* Version ladder spine */ body[data-theme="midnight"] .vl-spine { background: #050810; border-bottom-color: #050810; } body[data-theme="midnight"] .vl-spine:hover { background: #02050C; } /* Cadence rail */ body[data-theme="midnight"] .cad-rail { background: var(--paper-2); border-color: #050810; box-shadow: 4px 4px 0 #050810; } body[data-theme="midnight"] .cad-tab { background: #050810; border-color: #050810; } /* Co-pilot pane stays the same (already ink) */ /* Text overrides for sub-elements that hard-coded ink */ body[data-theme="midnight"] .pane-head h1 { color: var(--ink); } body[data-theme="midnight"] .pane-head-sub { color: var(--fg-2); } body[data-theme="midnight"] .pane-head-eyebrow { color: var(--orange); } /* Coin engrave still reads well */ body[data-theme="midnight"] .coin-engrave svg text { fill: var(--silver-2); } /* Subtle gentle glow on .card--swatch (NBM hero) — keep orange but tighten */ body[data-theme="midnight"] .card--swatch { border-color: #050810; box-shadow: 4px 4px 0 #050810, 0 0 40px rgba(255, 106, 44, 0.18); } /* ============================================================ Foreground-text contrast sweep Many screens use inline `color: var(--paper)` / `var(--paper-2)` to mean "light text on dark surface". In midnight, those tokens resolve to dark — so headings vanish into the bg. Force them back to light. Targets only inline-styled descendants of dark surfaces, so light surfaces stay untouched. ============================================================ */ body[data-theme="midnight"] .surf--ink [style*="(--paper)"], body[data-theme="midnight"] .card--ink [style*="(--paper)"], body[data-theme="midnight"] .surf--orange [style*="(--paper)"], body[data-theme="midnight"] .surf--azure [style*="(--paper)"], body[data-theme="midnight"] .card--swatch [style*="(--paper)"] { color: var(--ink) !important; } body[data-theme="midnight"] .surf--ink [style*="(--paper-2)"], body[data-theme="midnight"] .card--ink [style*="(--paper-2)"], body[data-theme="midnight"] .surf--orange [style*="(--paper-2)"], body[data-theme="midnight"] .surf--azure [style*="(--paper-2)"], body[data-theme="midnight"] .card--swatch [style*="(--paper-2)"] { color: rgba(232, 237, 246, 0.72) !important; } /* Waveform bars on dark surfaces — `.waveform--ink .bar` uses `background: var(--paper)` which goes invisible in midnight. */ body[data-theme="midnight"] .waveform--ink .bar { background: var(--ink); } body[data-theme="midnight"] .waveform .bar { background: var(--ink); } /* ============================================================ Dropzone in midnight — replace soft white-mist with deeper azure-mist so it stays in the same visual language but holds contrast on dark. ============================================================ */ body[data-theme="midnight"] .dropzone { background: linear-gradient(135deg, rgba(61, 125, 219, 0.42) 0%, rgba(36, 46, 71, 0.55) 55%, rgba(142, 202, 230, 0.18) 100%); border-color: rgba(255, 255, 255, 0.55); } body[data-theme="midnight"] .dropzone:hover { background: linear-gradient(135deg, rgba(61, 125, 219, 0.58) 0%, rgba(36, 46, 71, 0.65) 55%, rgba(142, 202, 230, 0.28) 100%); border-color: var(--orange); } body[data-theme="midnight"] .dropzone .surf-title, body[data-theme="midnight"] .dropzone h2 { color: var(--ink); } body[data-theme="midnight"] .dropzone p { color: var(--fg-2); } body[data-theme="midnight"] .dropzone-mark { box-shadow: 5px 5px 0 #050810; } /* Mist-azure surf variant in midnight — softer azure tint on dark */ body[data-theme="midnight"] .surf.mist-azure { background: linear-gradient(135deg, rgba(61, 125, 219, 0.22) 0%, rgba(36, 46, 71, 0.60) 55%, rgba(142, 202, 230, 0.12) 100%); border-color: #050810; } /* Inputs inside dark messenger thread composer — also need light caret/text */ body[data-theme="midnight"] .thread input, body[data-theme="midnight"] .surf--ink input { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.25) !important; color: var(--ink) !important; } body[data-theme="midnight"] .surf--ink input::placeholder { color: rgba(232,237,246,0.4); } /* The msg--artist bubble flips ink/paper meaning. Lock it to ink chip + light text. */ body[data-theme="midnight"] .msg--artist { background: #050810; color: var(--ink); border-color: #050810; box-shadow: 2px 2px 0 #050810; } /* Pane head h1 — leave alone (it already uses --ink which goes light) */ /* Pane head sub uses --fg-2 which is theme-aware */ /* Step list (sequential walkthrough) — light bg in light, needs midnight retune */ body[data-theme="midnight"] .steps { background: var(--paper-2); } body[data-theme="midnight"] .step { background: var(--paper-3); color: var(--ink); border-color: rgba(255,255,255,0.18); } body[data-theme="midnight"] .step .num { background: var(--paper); color: var(--ink-2); } body[data-theme="midnight"] .step--done { background: var(--azure); color: white; } body[data-theme="midnight"] .step--current { background: var(--orange); color: white; } /* Phone frame — stays inky in midnight; but the inner phone-screen should NOT flip to deep dark, because it's representing the mobile app surface. Keep it on paper-3 (dark surface) but ensure contents read. Optional: leave as is for now. */ body[data-theme="midnight"] .phone-screen { background: var(--paper-2); } body[data-theme="midnight"] .phone-screen .surf-eyebrow { color: var(--fg-muted); } /* ============================================================ Inline-styled white surfaces — many screens use style={{ background: 'white', ... }} to mean "light card on light theme". In midnight that becomes a glaring white block with light text → invisible. Flip to paper-3 dark surfaces. ============================================================ */ body[data-theme="midnight"] [style*="padding"][style*="background: white"], body[data-theme="midnight"] [style*="padding"][style*="background:white"] { background: var(--paper-3) !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.20) !important; } /* btn--ghost with inline `background: 'white'` — beat the inline */ body[data-theme="midnight"] .btn--ghost { background: rgba(255, 255, 255, 0.08) !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.30) !important; } body[data-theme="midnight"] .btn--ghost:hover { background: var(--azure) !important; color: white !important; border-color: var(--azure) !important; } /* Co-pilot toggle when closed (light surface in light theme) — adapt */ body[data-theme="midnight"] .cp-toggle { background: var(--paper-2) !important; color: var(--ink) !important; border-color: rgba(255, 255, 255, 0.25) !important; box-shadow: 2px 2px 0 #050810 !important; } body[data-theme="midnight"] .cp-toggle[aria-pressed="true"] { background: #050810 !important; color: var(--ink) !important; } /* ============================================================ MIDNIGHT OVERRIDES — daylight surface utilities Each new surface in daylight.css gets a midnight pair here so the class is safe to use under either theme. ============================================================ */ /* Sun-glow — re-tune to "midnight afterglow": deep ink with a coral-orange ember radial instead of butter+lilac. */ body[data-theme="midnight"] .surf--sun-glow, body[data-theme="midnight"] .card--sun-glow { background: radial-gradient(circle at 22% 22%, rgba(255, 122, 61, 0.35), transparent 50%), linear-gradient(135deg, #1A2540 0%, #1F2D4C 60%, #182542 100%); color: var(--ink); border-color: #050810; } /* Mist — "midnight haze": deep paper-2 with cool blue moonlight. */ body[data-theme="midnight"] .surf--mist, body[data-theme="midnight"] .card--mist { background: radial-gradient(ellipse 60% 50% at 28% 28%, rgba(95, 165, 240, 0.22), transparent 65%), linear-gradient(155deg, var(--paper-2) 0%, var(--paper-3) 100%); color: var(--ink); border-color: #050810; } /* Blueprint — looks great in midnight already (it IS deep azure-ink with a grid). Tighten the border + flare so it reads on dark canvas. */ body[data-theme="midnight"] .surf--blueprint, body[data-theme="midnight"] .card--blueprint { background-color: #0A1426; background-image: linear-gradient(rgba(95, 165, 240, 0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(95, 165, 240, 0.14) 1px, transparent 1px), linear-gradient(155deg, #0A1426 0%, #142540 60%, #06101F 100%); background-size: 28px 28px, 28px 28px, 100% 100%; border-color: #050810; } body[data-theme="midnight"] .surf--blueprint::before, body[data-theme="midnight"] .card--blueprint::before { background: radial-gradient(circle at 78% 28%, rgba(255, 80, 5, 0.32), transparent 48%), radial-gradient(circle at 12% 88%, rgba(95, 165, 240, 0.18), transparent 50%); } /* Orange-print — works on both themes; just tighten border. */ body[data-theme="midnight"] .surf--orange-print, body[data-theme="midnight"] .card--orange-print { border-color: #050810; } /* Lilac-mist — re-tune to a deeper plum in midnight so it still reads as the "song / fan-private" surface but at night. */ body[data-theme="midnight"] .surf--lilac-mist, body[data-theme="midnight"] .card--lilac-mist { background: radial-gradient(circle at 30% 25%, rgba(255, 122, 61, 0.18), transparent 60%), linear-gradient(135deg, #6B5B8A 0%, #8273A8 100%); color: var(--ink); border-color: #050810; }