/* ── Floe design system ───────────────────────────────────────── Warm editorial palette from the Claude Design "Floe" spec. Fonts (Space Grotesk / Manrope) load from Google Fonts when online; offline they degrade to system-ui — everything else is self-contained. */ :root { --paper:#F7F5EF; --card:#FCFBF8; --line:#E4E0D3; --line-soft:#EDEAE0; --ink:#1E2420; --ink-2:#4C4738; --muted:#726D5E; --muted-2:#8B8677; --faint:#ADA894; --faint-2:#C7C2B2; --green:#2B5940; --green-d:#1E4530; --green-tint:#E1EBE3; --green-bd:#BFDAC7; --green-soft:#C3D9C8; --blue:#2E4A66; --blue-tint:#E1E8EF; --blue-bd:#C2D2E0; --brown:#8A5A3B; --brown-tint:#F1E5DB; --brown-bd:#E0C7B3; --swim:#2E6E7E; --swim-tint:#DEECEE; --swim-bd:#BEDCE1; --sand:#7D7869; --sand-tint:#EDEBE3; /* semantic surface tokens — the only things dark mode redefines beyond the palette above; components read these instead of literal #fff / #F4F8F5. */ --surface:#fff; /* raised canvas: day/month cells, inputs, icon chips */ --today:#F4F8F5; /* the "today" cell tint */ --today-ring:rgba(43,89,64,.12); --seg-on:#fff; /* active pill in the segmented control */ --shadow:rgba(30,36,32,.08); --pill-bg:rgba(0,0,0,.05); /* neutral TSS chip */ --on-accent:#fff; /* text/icon sitting on a saturated fill */ --danger:#B33; /* out-of-band compliance */ --donut-track:#E7E3D6; /* Form donut + day ring backing */ --logo-belly:#FCFBF8; /* penguin belly */ --coach-bg:#F3E3C6; --coach-ink:#7A5A1E; --coach-bd:#E3CB9A; /* "Coaching" pill (two-user build) */ --map-line:#2B5940; --map-start:#0ca30c; --map-end:#8A5A3B; /* Leaflet (JS reads these) */ --disp:'Space Grotesk', system-ui, sans-serif; --sans:'Manrope', system-ui, -apple-system, sans-serif; color-scheme:light; } /* ── Graphite dark ─────────────────────────────────────────────── Floe's forest green is already dark, so on a dark ground the accent is *lifted* to a muted sage and the pale sport tints become deep tints — same brand at night, not an inversion. Set explicitly via data-theme (an inline script resolves the stored choice / OS preference before first paint). */ :root[data-theme="dark"] { --paper:#17181A; --card:#1E2022; --line:#2E3033; --line-soft:#26282B; --ink:#E9E9E5; --ink-2:#C3C2BB; --muted:#95948C; --muted-2:#7E7D75; --faint:#66655E; --faint-2:#4B4A45; --green:#67987E; --green-d:#83B39A; --green-tint:#1E2C24; --green-bd:#34503F; --green-soft:#3C6350; --blue:#7FA3C4; --blue-tint:#1B2733; --blue-bd:#33465A; --brown:#C08E68; --brown-tint:#2C2117; --brown-bd:#4A3826; --swim:#6BAAB6; --swim-tint:#152A2E; --swim-bd:#2C474C; --sand:#A8A292; --sand-tint:#26241C; --surface:#24262A; --today:#1C241F; --today-ring:rgba(131,179,154,.16); --seg-on:#31343A; --shadow:rgba(0,0,0,.4); --pill-bg:rgba(255,255,255,.07); --on-accent:#14150F; --danger:#E08A82; --donut-track:#2E332C; --logo-belly:#E9E9E5; --coach-bg:#2E2413; --coach-ink:#E3C892; --coach-bd:#4A3B1E; --map-line:#67987E; --map-start:#5FB65F; --map-end:#C08E68; color-scheme:dark; } * { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:14px; } a { color:var(--green); text-decoration:none; } a:hover { color:var(--green-d); } button { font-family:inherit; cursor:pointer; } /* page-level inputs (builder, settings, login) have inline backgrounds but no colour — without this they fall back to dark system text, unreadable on the dark surface. */ input, select, textarea { color:var(--ink); } .mono { font-variant-numeric:tabular-nums; } /* nav */ /* #nav wraps .nav and is only as tall as the bar (64px); display:contents dissolves that wrapper so the sticky .nav is bound to (the page scroller) and stays pinned for the whole scroll instead of unsticking after 64px. z-index:900 clears every page-content layer (highest is .map-expand at 500); modal