/* Small custom additions on top of Tailwind. Phase E will move Tailwind from the CDN to a compiled build and merge these into the source. */ /* --- Theme tokens. The element carries data-theme="light" | "dark". Light is the default; dark is toggled by the user via the nav button. Tailwind classes can still set explicit dark colors (e.g. `bg-ink-950`) but anything that reads from these vars will flip automatically. */ :root, :root[data-theme="light"] { color-scheme: light; --bg-base: #f6f6f4; --bg-surface: #ffffff; --bg-elevated: #fafafa; --bg-glass: rgba(255, 255, 255, 0.55); --aurora-1: rgba(124, 58, 237, 0.10); --aurora-2: rgba(59, 130, 246, 0.08); --aurora-3: rgba(6, 182, 212, 0.06); --text-primary: #0b0f17; --text-secondary: #374151; --text-muted: #6b7280; --text-faint: #9aa3b2; --border: rgba(15, 23, 42, 0.10); --border-strong: rgba(15, 23, 42, 0.20); --code-bg: #f1f5f9; } :root[data-theme="dark"] { color-scheme: dark; --bg-base: #070a12; --bg-surface: #0b0f17; --bg-elevated: #121826; --bg-glass: rgba(255, 255, 255, 0.04); --aurora-1: rgba(124, 58, 237, 0.25); --aurora-2: rgba(59, 130, 246, 0.20); --aurora-3: rgba(6, 182, 212, 0.15); --text-primary: #f5f7fb; --text-secondary: #c2c7d3; --text-muted: #9aa3b2; --text-faint: #6b7280; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.18); --code-bg: rgba(15, 23, 42, 0.8); } html { scroll-behavior: smooth; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Body bg + text follow the theme tokens. Tailwind classes on inner elements can still override per-component. */ background-color: var(--bg-base); color: var(--text-primary); } :focus:not(:focus-visible) { outline: none; } /* Scrollbars */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-base); } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); } /* ---------------------------------------------------------------------------- Light-mode shims for the most common dark Tailwind utilities used across the app. Anything component-specific keeps its Tailwind class; these only nudge the most common surfaces (page bg, glass cards, nav, default text) so light mode looks coherent without a full template rewrite. This is intentionally a small, scoped list - Phase E is the right time to extend it if more surfaces need tuning. ---------------------------------------------------------------------------- */ :root[data-theme="light"] .bg-ink-950, :root[data-theme="light"] .bg-ink-950\/40, :root[data-theme="light"] .bg-ink-950\/50, :root[data-theme="light"] .bg-ink-950\/60, :root[data-theme="light"] .bg-ink-950\/70, :root[data-theme="light"] .bg-ink-950\/80 { background-color: var(--bg-base) !important; } :root[data-theme="light"] .bg-ink-900, :root[data-theme="light"] .bg-ink-900\/60, :root[data-theme="light"] .bg-ink-900\/70, :root[data-theme="light"] .bg-ink-900\/40, :root[data-theme="light"] .bg-ink-900\/50, :root[data-theme="light"] .bg-ink-900\/80 { background-color: var(--bg-surface) !important; } :root[data-theme="light"] .bg-ink-800, :root[data-theme="light"] .bg-ink-800\/40, :root[data-theme="light"] .bg-ink-800\/60 { background-color: var(--bg-elevated) !important; } :root[data-theme="light"] .bg-ink-700, :root[data-theme="light"] .bg-ink-700\/60 { background-color: #e5e7eb !important; color: var(--text-primary) !important; } :root[data-theme="light"] .bg-glass-grad { background-image: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.6)) !important; } :root[data-theme="light"] .border-ink-700\/60, :root[data-theme="light"] .border-ink-700, :root[data-theme="light"] .border-ink-600, :root[data-theme="light"] .border-ink-600\/60, :root[data-theme="light"] .border-ink-600\/80 { border-color: var(--border-strong) !important; } :root[data-theme="light"] .divide-ink-700\/60 > * + * { border-color: var(--border) !important; } :root[data-theme="light"] .text-mist-100, :root[data-theme="light"] .text-mist-200 { color: var(--text-primary) !important; } :root[data-theme="light"] .text-mist-300 { color: var(--text-secondary) !important; } :root[data-theme="light"] .text-mist-400 { color: var(--text-muted) !important; } :root[data-theme="light"] .text-mist-500, :root[data-theme="light"] .text-mist-600 { color: var(--text-faint) !important; } /* Accent colors: the dark-mode-tuned 200/300 shades are designed for tinted backgrounds at 5-15% opacity. On the light-theme white surfaces they go washed-out (yellow on white was the worst offender - "Your email isn't verified yet" was effectively invisible). Push them to the 700/800 range so they read against white. */ :root[data-theme="light"] .text-amber-200, :root[data-theme="light"] .text-amber-300, :root[data-theme="light"] .text-amber-400 { color: #92400e !important; } :root[data-theme="light"] .hover\:text-amber-100:hover, :root[data-theme="light"] .hover\:text-amber-200:hover { color: #78350f !important; } :root[data-theme="light"] .text-emerald-200, :root[data-theme="light"] .text-emerald-300, :root[data-theme="light"] .text-emerald-400 { color: #065f46 !important; } :root[data-theme="light"] .text-red-200, :root[data-theme="light"] .text-red-300, :root[data-theme="light"] .text-red-400 { color: #991b1b !important; } :root[data-theme="light"] .text-accent-cyan { color: #155e75 !important; } :root[data-theme="light"] .text-accent-violet { color: #5b21b6 !important; } :root[data-theme="light"] .text-accent-blue { color: #1d4ed8 !important; } /* Hover variants - Tailwind compiles these to separate classes (`hover\:text-mist-200:hover { color: theme(colors.mist.200) }`) so the shims above don't catch them. Without these the admin sidebar items go invisible the moment you hover them in light mode. */ :root[data-theme="light"] .hover\:text-mist-100:hover, :root[data-theme="light"] .hover\:text-mist-200:hover { color: var(--text-primary) !important; } :root[data-theme="light"] .hover\:text-mist-300:hover { color: var(--text-secondary) !important; } :root[data-theme="light"] .hover\:text-mist-400:hover { color: var(--text-muted) !important; } :root[data-theme="light"] .group:hover .group-hover\:text-white, :root[data-theme="light"] .group\/c:hover .group-hover\/c\:text-white { color: var(--text-primary) !important; } :root[data-theme="light"] .hover\:bg-ink-800\/60:hover, :root[data-theme="light"] .hover\:bg-ink-800\/40:hover, :root[data-theme="light"] .hover\:bg-ink-800:hover { background-color: var(--bg-elevated) !important; } :root[data-theme="light"] .hover\:bg-ink-700\/60:hover, :root[data-theme="light"] .hover\:bg-ink-700:hover, :root[data-theme="light"] .hover\:bg-ink-600:hover { background-color: #e5e7eb !important; } :root[data-theme="light"] input, :root[data-theme="light"] textarea, :root[data-theme="light"] select { background-color: var(--bg-surface) !important; color: var(--text-primary) !important; border-color: var(--border-strong) !important; } :root[data-theme="light"] input::placeholder, :root[data-theme="light"] textarea::placeholder { color: var(--text-faint) !important; } :root[data-theme="light"] .bg-aurora { background-image: radial-gradient(at 20% 10%, var(--aurora-1) 0px, transparent 50%), radial-gradient(at 80% 20%, var(--aurora-2) 0px, transparent 50%), radial-gradient(at 40% 80%, var(--aurora-3) 0px, transparent 50%) !important; } /* Selection contrast on light */ :root[data-theme="light"] ::selection { background: rgba(124, 58, 237, 0.18); color: inherit; } /* Code blocks intentionally stay dark even on light pages - that's the convention every dev-facing site uses (GitHub, MDN, Tailwind docs) and our prose templates were written assuming light-on-dark code. The bg-ink-900/80 shim above would otherwise flip pre backgrounds to white while prose keeps the text color light, making code invisible. */ :root[data-theme="light"] .prose pre, :root[data-theme="light"] .prose pre.bg-ink-900\/80, :root[data-theme="light"] pre.bg-ink-900\/80 { background-color: #0b0f17 !important; color: #e5e7eb !important; border-color: rgba(255, 255, 255, 0.08) !important; } :root[data-theme="light"] .prose pre code, :root[data-theme="light"] pre.bg-ink-900\/80 code { color: #e5e7eb !important; background: transparent !important; } /* Inline `code` inside prose: subtle chip on light bg. */ :root[data-theme="light"] .prose :not(pre) > code { background-color: #f1f5f9 !important; color: #0b0f17 !important; padding: 0.1em 0.35em; border-radius: 0.25rem; font-size: 0.92em; } /* The Pro Max banner uses bg-glass-grad which we shim to a near-white gradient - against that, text-mist-100 (which we shim to dark) and text-accent-cyan stay visible. No special rules needed for that surface beyond the existing shims. */ /* ---------------------------------------------------------------------------- Prose typography colour overrides. Templates that render long-form content (Terms, Privacy, blog posts, concept pages) use Tailwind's `prose` plugin without `prose-invert` so light mode (the product default) renders correctly. In dark mode we re-apply invert-style colours via the same CSS variables the plugin consumes - no template changes needed. ---------------------------------------------------------------------------- */ :root[data-theme="dark"] .prose { --tw-prose-body: var(--text-secondary); --tw-prose-headings: var(--text-primary); --tw-prose-lead: var(--text-secondary); --tw-prose-links: #a5b4fc; --tw-prose-bold: var(--text-primary); --tw-prose-counters: var(--text-muted); --tw-prose-bullets: var(--text-faint); --tw-prose-hr: var(--border); --tw-prose-quotes: var(--text-primary); --tw-prose-quote-borders: var(--border-strong); --tw-prose-captions: var(--text-muted); --tw-prose-code: var(--text-primary); --tw-prose-pre-code: #e5e7eb; --tw-prose-pre-bg: #0b0f17; --tw-prose-th-borders: var(--border-strong); --tw-prose-td-borders: var(--border); } /* Even with the variables above, our templates also set explicit `prose-headings:text-mist-100 prose-p:text-mist-300` modifier classes. Those compile to `.prose h1 { color: theme(colors.mist.100); }` etc., which override the variables. The text-mist-* shims at the top of this file already handle them in light mode, so no extra rules needed. */ /* --- Top-nav dropdowns: readable in BOTH themes -------------------------- The dropdown panel previously used bg-ink-900 (dark) with text-mist-200, but in light mode only the text flipped, leaving dark-on-dark = invisible. These explicit rules give the trigger + panel correct colors per theme. */ .nav-trigger { color: #c2c7d3; } /* dark mode default */ .nav-trigger:hover { color: #ffffff; } :root[data-theme="light"] .nav-trigger { color: #374151; } :root[data-theme="light"] .nav-trigger:hover { color: #0b0f17; } .nav-panel { background: #0b0f17; border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.55); } .nav-panel a { color: #e6e8ee; } .nav-panel a:hover { background: #121826; color: #ffffff; } :root[data-theme="light"] .nav-panel { background: #ffffff; border-color: #e2e8f0; box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.18); } :root[data-theme="light"] .nav-panel a { color: #1f2937; } :root[data-theme="light"] .nav-panel a:hover { background: #f1f5f9; color: #0b0f17; } /* Defensive sizing for user/AI-authored content images (blog posts, concepts). Keeps a broken/oversized or 404'd pasted image from blowing out the layout near the bottom of a page - it stays within the column. */ .prose img, .prose-invert img { max-width: 100%; height: auto; border-radius: 0.5rem; min-height: 1px; }