/* Design tokens — shared by index.html (Atlas) and map.html (Satellite). * Every colour token is declared ONCE on :root as light-dark(, ); * the scheme comes from color-scheme: :root follows the OS, [data-theme] pins it * (map.html pins dark for satellite, plain.html pins light). The pins also carry * the six --map-* overlay tokens (data-contract invariant). * NB: cssVar() returns a light-dark() token unresolved; only feed it to CSS or * SVG presentation attributes, never to a colour parser (d3/MapLibre). * Sources: design-specs/apple-maps.md (platter language, iOS label ramp) + * design-specs/flighty.md (20px soft-shadow cards); 2026-09 refresh adds the rem * type scale, spacing steps, paper surfaces, status pairs and cadastral accent. * JS reads the ramp, cat and map tokens at boot via cssVar(). */ /* Self-hosted fonts (SIL OFL 1.1, licences in assets/fonts/). Google Fonts subsets: * latin + latin-ext (Afrikaans diacritics). IBM Plex Sans is variable, wght 400–600. */ @font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;font-display:swap; src:url("fonts/IBMPlexSans-VF-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;font-display:swap; src:url("fonts/IBMPlexSans-VF-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Source Serif 4";font-style:normal;font-weight:600;font-display:swap; src:url("fonts/SourceSerif4-SemiBold-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Source Serif 4";font-style:normal;font-weight:600;font-display:swap; src:url("fonts/SourceSerif4-SemiBold-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} :root { color-scheme: light dark; /* surfaces */ --bg: light-dark(#ffffff, #1c1c1e); --bg2: light-dark(#fbfbfd, #242426); /* cards */ --bg3: light-dark(#f5f5f7, #2c2c2e); /* rails, wells, secondary buttons */ --ink: light-dark(#1d1d1f, #f5f5f7); --ink2: light-dark(#6e6e73, #98989d); --label2: light-dark(rgba(60, 60, 67, .75), rgba(235, 235, 245, .6)); /* ≥4.5:1 on bg/bg2/bg3 (WCAG AA, audit 2026-07-19) */ --label3: light-dark(rgba(60, 60, 67, .45), rgba(235, 235, 245, .45)); /* decoration/disabled only — NOT for reading text */ --sep: light-dark(rgba(60, 60, 67, .18), rgba(84, 84, 88, .65)); --hairline: light-dark(#e8e8ed, #3a3a3c); --scrim: light-dark(rgba(0, 0, 0, .4), rgba(0, 0, 0, .55)); --paper: light-dark(#fbfaf7, #1c1c1e); /* warm document surface */ --paper-2: light-dark(#f3f2ee, #242426); --rule: light-dark(#d9d6cf, #3a3a3c); /* printed-register rules */ /* type scale (rem) + spacing steps */ --t-11: .6875rem; --t-12: .75rem; --t-13: .8125rem; --t-14: .875rem; --t-16: 1rem; --t-20: 1.25rem; --t-26: 1.625rem; --t-34: 2.125rem; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; /* the one accent + semantic ramp (state only, never decoration) */ --accent: light-dark(#1f4e8c, #6ea8ff); /* cadastral blue */ --accent-ink: light-dark(#ffffff, #0b1a2e); /* ≥4.5:1 on --accent: 8.31 light, 7.25 dark */ --ok: light-dark(#039855, #30d158); --bad: light-dark(#d92d20, #ff453a); /* status pairs: ink on its own tint (badge = glyph + text, never colour alone) */ --st-ok-ink: light-dark(#1f6b3a, #6fcf97); --st-ok-bg: light-dark(#e6f2ea, rgba(111, 207, 151, .18)); --st-warn-ink: light-dark(#8a5a00, #e3b341); --st-warn-bg: light-dark(#f7efdc, rgba(227, 179, 65, .18)); --st-neutral-ink: light-dark(#5c6570, #aab2bd); --st-neutral-bg: light-dark(#eceef1, rgba(170, 178, 189, .18)); --st-none-ink: light-dark(#5f636a, #a8aeb4); /* ≥5:1 on its tint: 5.30 light; 5.58/5.06 dark on --bg/--bg2 */ --st-none-bg: light-dark(#f0f0f2, rgba(154, 160, 166, .18)); --st-bad-ink: light-dark(#a12a2a, #f28b82); --st-bad-bg: light-dark(#f8e6e6, rgba(242, 139, 130, .18)); --seg-on: light-dark(#ffffff, #636366); /* active chip of iOS-style segmented controls */ /* shape + elevation (shadow colours switch per layer; a layer that exists in * only one scheme is transparent in the other) */ --r-panel: 16px; --r-card: 20px; --r-ctl: 8px; --r-chip: 10px; --r-pill: 999px; --shadow-platter: 0 -2px 20px light-dark(rgba(0, 0, 0, .1), rgba(0, 0, 0, .45)), 0 0 12px light-dark(rgba(0, 0, 0, .1), rgba(0, 0, 0, .35)); --shadow-card: 0 0 0 1px light-dark(rgba(0, 0, 0, .04), rgba(255, 255, 255, .06)), 0 1px 1px .5px light-dark(rgba(0, 0, 0, .02), transparent), 0 3px 3px 1.5px light-dark(rgba(0, 0, 0, .02), transparent), 0 6px 6px -3px light-dark(rgba(0, 0, 0, .02), transparent), 0 12px 12px -6px light-dark(rgba(0, 0, 0, .02), transparent), 0 24px 24px -12px light-dark(rgba(0, 0, 0, .02), transparent), 0 6px 18px -8px light-dark(transparent, rgba(0, 0, 0, .6)); --shadow-overlay: 0 30px 80px -30px light-dark(rgba(0, 0, 0, .45), rgba(0, 0, 0, .8)); --platter-bg: light-dark(rgba(255, 255, 255, .72), rgba(30, 30, 32, .72)); --blur: blur(20px) saturate(180%); /* type */ --font-ui: "IBM Plex Sans", system-ui, -apple-system, sans-serif; --font-display: "Source Serif 4", Georgia, "Times New Roman", serif; --font-map: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; /* choropleth (ramp fills are the same in both schemes and stay plain hex: * atlas.js interpolates them with d3, which cannot parse light-dark()) */ --ramp-1: #e0efff; --ramp-2: #a9d0fb; --ramp-3: #5ea9f7; --ramp-4: #1f7ae0; --ramp-5: #0b4fa8; --land: light-dark(#e7e7ec, #2c2c2e); --nodata: light-dark(#dcdce2, #3a3a3c); --map-stroke: light-dark(#ffffff, #1c1c1e); /* borders between regions on the choropleth */ --map-outline: light-dark(#1d1d1f, #f5f5f7); /* WC outline + label ink */ --map-halo: light-dark(rgba(255, 255, 255, .85), rgba(20, 20, 22, .85)); /* category mix (muted 6-hue; same in both schemes) */ --cat-res: #4193f0; --cat-com: #e8a13c; --cat-agri: #37b184; --cat-state: #9291a0; --cat-vacant: #d9c893; --cat-other: #cfcfd6; --cat-ind: #b8744f; /* Explore 8-group bar: industrial */ --cat-pub: #7fa3c4; /* Explore 8-group bar: public infrastructure */ /* map overlay layers (parcels/wards/highlights): the values live on the * theme pins below — map.html pins dark (white lines on satellite imagery), * plain.html pins light (ink lines on the OpenFreeMap vector basemap) — * so map.js's cssVar() reads resolve per page with no JS branching. */ } /* plain.html pins light regardless of system preference (OpenFreeMap liberty * is a light basemap; the chrome + overlay inks match it) */ :root[data-theme="light"] { color-scheme: light; --map-bg: #eef0ee; /* neutral fallback before vector tiles paint */ --map-parcel-line: rgba(29, 29, 31, .55); --map-parcel-sel: #1f4e8c; /* cadastral accent (= --accent light) */ --map-ward: #b8790a; --map-ward-label: #8a5a06; --map-muni-line: rgba(29, 29, 31, .35); } /* map.html pins dark regardless of system preference (satellite imagery) */ :root[data-theme="dark"] { color-scheme: dark; /* satellite map layers (white/amber over dark imagery) */ --map-bg: #0b0b0d; --map-parcel-line: rgba(255, 255, 255, .85); --map-parcel-sel: #0a84ff; --map-ward: #e8b93c; --map-ward-label: #f3dfa0; --map-muni-line: rgba(255, 255, 255, .55); } /* Keyboard focus: one visible tint ring everywhere (audit 2026-07-19). * Elements with their own :focus-visible treatment (e.g. #search, #resetBtn) * override this via higher specificity. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Only the upright Source Serif 4 600 ships: never fake italics/bolds. */ body { font-synthesis: none; }