/* Settle Markets — visual system carried from Pearl Exchange's research-paper aesthetic (warm neutrals, serif italics for moments of voice, mono for numbers) with Settle's own identity: probability-first color language — YES green / NO red — and a split-disc brand mark instead of the orb. Custom property NAMES are kept identical to pearl so components transplant cleanly; only hue accents are tuned. */ :root { /* Palette matched to the settle.market landing page (cool green-tinted neutrals, Spotify-green accent). Variable NAMES kept identical so components transplant unchanged; only the values are retuned. */ --bg: #f5f7f1; --bg-tint: #e8f0e6; --card: #ffffff; --card-2: #f2f7f0; --ink: #102219; --ink-2: #33443b; --ink-3: #68776e; /* = landing --muted */ --ink-4: #93a399; --line: #d8dfd7; /* = landing --line */ --line-2: #e4eae2; --green: #1ed760; /* landing signature accent (Spotify green) */ --pos: #116b38; /* readable green for YES/up text (landing --green-dark) */ --neg: #c95d50; /* landing --red */ --warn: oklch(0.74 0.13 70); /* Iridescent sheen — retinted to the landing's green family. */ --sheen-a: #dff2e0; --sheen-b: #e8f0e6; --sheen-c: #f6dcd8; --sheen-d: #eaf6cf; /* Brand-mark halves: --pos/--neg dropped to low chroma so the disc reads as an object, not a warning light. */ --mark-pos: oklch(0.84 0.07 145); --mark-neg: oklch(0.84 0.08 28); --shadow-card: 0 1px 0 rgba(16, 34, 25, 0.04), 0 8px 24px -16px rgba(16, 34, 25, 0.18); --shadow-pop: 0 8px 28px -8px rgba(16, 34, 25, 0.2); --radius: 14px; --radius-sm: 9px; /* Aliases so any inline styles using --surface-1 / --ink-0 share the same dark/light pipe (pearl convention). */ --surface-1: var(--card); --surface-2: var(--card-2); --ink-0: var(--ink); } /* ── Dark theme. Activated by from theme.js. ── We keep the warm cast of the light palette (the paper stays warm), but flip the ink/bg relationship. Comments only on values that aren't "the obvious dark equivalent". */ [data-theme="dark"] { --bg: #07110c; /* landing --bg (deep green-black) */ --bg-tint: #0b1712; --card: #0c1911; /* landing --surface */ --card-2: #122117; --ink: #e8faee; /* landing --ink */ --ink-2: #c0d3c7; --ink-3: #8ba094; /* landing --muted */ --ink-4: #5c6f64; --line: #233b2e; /* landing --line */ --line-2: #18271f; --green: #1ed760; --pos: #43f784; /* landing --green-dark (dark) — bright, high-contrast */ --neg: #e07469; --warn: oklch(0.80 0.16 70); --mark-pos: oklch(0.48 0.08 145); --mark-neg: oklch(0.48 0.09 28); --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.40), 0 12px 28px -16px rgba(0, 0, 0, 0.55); --shadow-pop: 0 12px 32px -8px rgba(0, 0, 0, 0.60); --surface-1: var(--card); --surface-2: var(--card-2); --ink-0: var(--ink); } /* Tell the UA so form controls, scrollbars, and ::selection get a dark cast. */ :root { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } /* Native