/* ============================================================================ * Theme tokens — light + dark. Tailwind config (inline per-page) references * these via rgb(var(--c-x) / ) so every utility like bg-bg, * text-muted, border-border/60 automatically follows the active theme. * * Dark is the default (matches the trading-cockpit aesthetic). Light is * applied when has class="light". * ============================================================================ */ :root { /* Dark theme — the default. */ --c-bg: 13 17 23; /* #0d1117 */ --c-bg-soft: 22 27 34; /* #161b22 */ --c-bg-deep: 1 4 9; /* #010409 */ --c-border: 48 54 61; /* #30363d */ --c-border-soft: 33 38 45; /* #21262d */ --c-ink: 230 237 243; /* #e6edf3 */ --c-muted: 139 148 158; /* #8b949e */ --c-accent: 126 231 135; /* #7ee787 */ --c-accent2: 121 192 255; /* #79c0ff */ --c-danger: 255 123 114; /* #ff7b72 */ --c-warn: 230 167 0; /* #e6a700 */ --c-on-accent: 1 4 9; /* text color to use on top of bg-accent (dark ink) */ color-scheme: dark; } :root.light { /* Light theme — paper-ink feel; green accents stay green but shifted for white background contrast. */ --c-bg: 255 255 255; /* #ffffff */ --c-bg-soft: 249 250 251; /* #f9fafb */ --c-bg-deep: 243 244 246; /* #f3f4f6 */ --c-border: 209 213 219; /* #d1d5db */ --c-border-soft: 229 231 235; /* #e5e7eb */ --c-ink: 17 24 39; /* #111827 */ --c-muted: 107 114 128; /* #6b7280 */ --c-accent: 5 150 105; /* #059669 — emerald-600 */ --c-accent2: 37 99 235; /* #2563eb — blue-600 */ --c-danger: 220 38 38; /* #dc2626 — red-600 */ --c-warn: 217 119 6; /* #d97706 — amber-600 */ --c-on-accent: 255 255 255; /* white text on saturated emerald accent */ color-scheme: light; } /* ============================================================================ * Base tweaks * ============================================================================ */ html { scroll-behavior: smooth; } body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* Sticky-nav offset for anchor links. */ section[id] { scroll-margin-top: 80px; } /* Monospace helper used on metric tiles in the sample card. */ .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } /* Larger tap targets on mobile. */ @media (max-width: 640px) { button, a { touch-action: manipulation; } } /* ============================================================================ * Theme-toggle button * * Shows a moon in dark mode (click to go light) and a sun in light mode * (click to go dark). Always has a subtle visible border so it reads as * a button, never vanishes visually. * !important on display rules defends against Tailwind Preflight's * svg { display: block } reset. * ============================================================================ */ .theme-toggle { display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; color: rgb(var(--c-ink)); border: 1px solid rgb(var(--c-border)); background: rgb(var(--c-bg-soft)); cursor: pointer; padding: 0; transition: color 120ms, border-color 120ms, background 120ms; } .theme-toggle:hover { color: rgb(var(--c-accent)); border-color: rgb(var(--c-accent)); } .theme-toggle svg { width: 20px; height: 20px; display: block !important; } .theme-toggle .icon-sun { display: none !important; } .theme-toggle .icon-moon { display: block !important; } :root.light .theme-toggle .icon-sun { display: block !important; } :root.light .theme-toggle .icon-moon { display: none !important; } /* ============================================================================ * Primary CTA button + "Recommended" badge * * Defensive, explicit styling — we don't rely on Tailwind's custom color * token resolution (text-on-accent was occasionally rendering unreadable * in light mode depending on CDN load order). These classes set bg + text * colors directly via CSS vars so the result is deterministic in both * themes. A subtle shadow adds lift so CTAs read as tappable targets. * ============================================================================ */ .btn-primary { background-color: rgb(var(--c-accent)) !important; color: rgb(var(--c-on-accent)) !important; border: 1px solid rgb(var(--c-accent)); transition: background-color 120ms, box-shadow 120ms, transform 120ms; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.08); } .btn-primary:hover { background-color: rgb(var(--c-accent) / 0.88) !important; box-shadow: 0 3px 8px -1px rgb(var(--c-accent) / 0.35); } .btn-primary:active { transform: translateY(1px); } .btn-primary:focus-visible { outline: 2px solid rgb(var(--c-accent)); outline-offset: 2px; } .badge-primary { background-color: rgb(var(--c-accent)) !important; color: rgb(var(--c-on-accent)) !important; box-shadow: 0 2px 6px -1px rgb(0 0 0 / 0.12), 0 0 0 1px rgb(var(--c-accent) / 0.25); } /* ============================================================================ * Prose (used on /privacy, /terms) * * The Tailwind typography plugin's prose-invert is built for dark; we want * ink colors that follow the theme tokens. * ============================================================================ */ .prose-khabir { color: rgb(var(--c-ink)); line-height: 1.7; } .prose-khabir h2 { margin: 2rem 0 0.75rem; font-size: 1.5rem; font-weight: 700; } .prose-khabir h3 { margin: 1.5rem 0 0.5rem; font-size: 1.15rem; font-weight: 700; color: rgb(var(--c-ink)); } .prose-khabir p { margin: 0.75rem 0; color: rgb(var(--c-muted)); } .prose-khabir a { color: rgb(var(--c-accent)); text-decoration: underline; text-underline-offset: 2px; } .prose-khabir ul { margin: 0.75rem 0; padding-left: 1.4rem; list-style: disc; color: rgb(var(--c-muted)); } .prose-khabir li { margin: 0.25rem 0; } .prose-khabir strong { color: rgb(var(--c-ink)); font-weight: 600; } .prose-khabir hr { border: 0; border-top: 1px solid rgb(var(--c-border) / 0.6); margin: 2rem 0; }