/* ============================================================ nokken tokens — single source of truth ============================================================ Lifted verbatim from the Round 1 foundations card (scale) and the Round 3 screens (dark-mode color overrides). Component CSS references these tokens only; no literal colors/space/radii in component files. Typography sizes are intentionally not tokenized — the design uses a purpose-chosen size per component slot, not a capped ramp. Source: design/Round-3-Screens.html (and Round 1 for scale tokens that Round 3 didn't re-publish). When the design iterates, overwrite this file and let components follow. */ :root { /* === Brand === */ --brand-500: #2285c6; --brand-600: #1a6ea8; --brand-700: #155a8a; --brand-400: #4ea0d6; --brand-100: #dbeaf5; --brand-050: #eef5fb; /* === Surfaces (cool off-white, nautical-chart restraint) === */ --surface-base: #f4f6f9; --surface-raised: #ffffff; --surface-sunken: #eceff4; --surface-overlay: rgba(255, 255, 255, 0.82); /* === Text === */ --text-primary: #0e1a26; --text-secondary: #42566a; /* Phase 6 PR 6.4 — darkened from #7389a0 so that the secondary "muted" shade clears WCAG AA (4.5:1) on white, surface-base (#f4f6f9), and surface-sunken (#eceff4). Prior value was 3.1–3.6:1 across those surfaces and broke color-contrast on every page that uses it. */ --text-muted: #556a7d; --text-disabled: #aab9cc; --text-on-brand: #ffffff; /* === Borders === */ --border-subtle: #e3e8ef; --border-default: #cfd7e2; --border-strong: #aab9cc; /* === R11 elevation strip primitives === Round 11 introduces two strip-only colour tokens. They live in the global tokens file (rather than scoped to components.css) so dark-mode overrides can be added in one place when that theme work lands. ``--strip-band-divider-fg`` is the band-edge stroke (1.25px tick between bands). ``--elevation-tooltip-bg`` is the dark chip background for the visible cursor tooltip introduced in PR B; it is added in PR A so the token system stays consistent across the three-PR sequence. */ --strip-band-divider-fg: #b9c2cb; --elevation-tooltip-bg: #0e1a26; /* === Status (5-step flow scale — five distinct hues, not a ramp) Tested for deuteranopia/protanopia via hue + lightness staircase. */ --status-too-low-bg: #e7e0d4; --status-too-low-fg: #6b5a3a; --status-too-low-dot: #a08a5c; --status-low-bg: #fde6c2; --status-low-fg: #7a4d05; --status-low-dot: #d68a1c; --status-good-bg: #cdeadd; --status-good-fg: #0f5a3d; --status-good-dot: #1f9a66; --status-high-bg: #d3e4fb; --status-high-fg: #0e3b6b; --status-high-dot: #2b6bd6; --status-very-high-bg: #f7d4d9; --status-very-high-fg: #7a1728; --status-very-high-dot: #c42a47; /* === Semantic === */ --warning-bg: #fff3d6; --warning-fg: #7a4d05; --warning-border: #f0c878; --danger-bg: #fde3e6; --danger-fg: #7a1728; --danger-border: #e8a3ad; --link: #1a6ea8; --link-hover: #155a8a; /* === Spacing (4px base, tight at bottom for dense data) === */ --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 32px; --space-9: 40px; --space-10: 56px; --space-11: 72px; --space-12: 96px; /* === Chrome metrics === Shared sizes for chrome surfaces so every mobile element that needs to clear the bottom tab bar references one number. `--tabbar-height` is the *base* height — i.e. what the tabbar occupies above the iOS home-indicator safe area. Surfaces that need to clear the whole tabbar (body padding, sheet reserve, overlay bottom) add `env(safe-area-inset-bottom)` on top. The tabbar itself is hard-locked to this height + safe-area via its own `height` rule in chrome.css, so this token is authoritative: a change here resizes the tabbar and every reservation consistently. Value measured against devtools: icon 22 + gap 3 + label line-box + vertical padding ≈ 74px without safe-area. Rounded up for a little breathing room. */ --tabbar-height: 74px; /* === Radii (rounded / fluid, not pillowy) === */ --radius-xs: 4px; /* pills, chips inside dense rows */ --radius-sm: 6px; /* inputs, small buttons */ --radius-md: 10px; /* buttons, tabs */ --radius-lg: 14px; /* cards */ --radius-xl: 20px; /* hero surfaces */ --radius-2xl: 28px; /* panels on large screens */ --radius-pill: 999px; /* === Elevation (soft, watery — no hard drop shadows) === */ --elev-0: none; --elev-1: 0 1px 2px rgba(14, 26, 38, 0.04), 0 0 0 1px rgba(14, 26, 38, 0.04); --elev-2: 0 1px 2px rgba(14, 26, 38, 0.05), 0 4px 12px -2px rgba(14, 26, 38, 0.06), 0 0 0 1px rgba(14, 26, 38, 0.04); --elev-3: 0 2px 4px rgba(14, 26, 38, 0.05), 0 12px 32px -6px rgba(14, 26, 38, 0.10), 0 0 0 1px rgba(14, 26, 38, 0.05); --elev-4: 0 4px 8px rgba(14, 26, 38, 0.06), 0 24px 60px -10px rgba(14, 26, 38, 0.14), 0 0 0 1px rgba(14, 26, 38, 0.05); /* === Type === */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* === Round-12 catchment-weather chart tokens === Four chart-specific colours added for the Proposal B card body. Reused inside `.wxB-chart-wrap` only — the surrounding card chrome stays on the existing surface/border tokens. ``--wx-tile-bg`` is the sunken chart-area background; ``--wx-grid`` is the in-chart gridline; ``--wx-axis`` is the bottom axis line + tick label; ``--wx-glyph-stroke`` is reserved for any inline-SVG glyphs on the card (currently unused — derived glyphs render on `currentColor` via the shared `text-primary` token). */ --wx-tile-bg: #f3f6fb; --wx-grid: #d8dee7; --wx-axis: #9aa6b5; --wx-glyph-stroke: var(--text-primary); /* === Feature grid heights (Round 6) === Three discrete steps for section-detail #features shared-height grid, keyed on feature count. See DESIGN.md §"Components — Features grid". The full step caps at 100vh − 220px so it never reads like its own page on a short viewport. */ --feat-h-full: min(560px, calc(100vh - 220px)); --feat-h-short: 420px; --feat-h-tiny: 320px; } /* Dark-mode token overrides — colors only; spacing and radii are theme-agnostic. */ .theme-dark { --surface-base: #0b1420; --surface-raised: #14202e; --surface-sunken: #0e1a26; --surface-overlay: rgba(20, 32, 46, 0.78); --text-primary: #eaf1f8; --text-secondary: #a9bccf; --text-muted: #6d8299; --text-disabled: #44586d; --border-subtle: #1e2d3f; --border-default: #27394f; --border-strong: #3a516c; --brand-050: #142638; --brand-100: #1a3350; --brand-500: #3aa0dd; --brand-600: #5ab4ec; --status-too-low-bg: #2a251b; --status-too-low-fg: #c9b891; --status-too-low-dot: #b89c68; --status-low-bg: #3a2a12; --status-low-fg: #f0c477; --status-low-dot: #e4a033; --status-good-bg: #0f2a20; --status-good-fg: #6ed4a3; --status-good-dot: #2fb579; --status-high-bg: #0e2240; --status-high-fg: #91bdf2; --status-high-dot: #4f8def; --status-very-high-bg: #3a0e16; --status-very-high-fg: #f09aa7; --status-very-high-dot: #e04663; --warning-bg: #332500; --warning-fg: #f0c477; --warning-border: #7a5b1c; /* Round-12 catchment-weather chart — dark-mode shifts. The chart sits inside a card on `--surface-raised`, so the tile background is a slightly deeper shade for separation; the gridlines and axis pick up the same neutral ramp the dark scheme uses for borders. */ --wx-tile-bg: #0e1a26; --wx-grid: #27394f; --wx-axis: #6d8299; --wx-glyph-stroke: var(--text-primary); --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03); --elev-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04); --elev-3: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 32px -6px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05); --elev-4: 0 4px 8px rgba(0, 0, 0, 0.5), 0 24px 60px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06); } /* Dark-mode logo recolour — brand-blue paths become a lighter blue for contrast on dark surfaces, and the nøkken's white eye dots (path19 / path21 in _logo.html) become the dark surface colour so they still register as eyes against the recoloured wave. The ripple rings stay `fill:none` in both themes. */ .theme-dark .nokken-logo path[style*="#2285c6"], .theme-dark .nokken-logo path[fill="#2285c6"] { fill: #5ab4ec !important; } .theme-dark .nokken-logo path[style*="#ffffff"] { fill: #14202e !important; } /* OS-driven dark mode — closure D4. Mirrors the .theme-dark class block above so the site goes dark when the OS / browser reports `prefers-color-scheme: dark`. Token values are kept in lock-step with the .theme-dark block and the manual override block below — when one moves, move all three. A handful of tokens that .theme-dark didn't override are tuned here for the dark surface (link, danger family, strip primitives) so no near-light-mode hue leaks through. D4 follow-up — manual color-scheme toggle. ``html[data-color-scheme]`` set by base.html from the ``nk_color_scheme`` cookie and updated live by ``static/js/color_scheme.js`` lets a visitor override the OS preference. The media-query rule is gated on ``:not([data-color-scheme="light"])`` so an explicit "light" beats the OS dark, and a parallel ``html[data-color-scheme="dark"]`` block forces dark on a light OS. Tokens for "auto + light OS" are simply the :root defaults at the top of this file — there is no third "force light" override needed beyond turning the dark rules off, which the :not() selector does. */ @media (prefers-color-scheme: dark) { :root:not([data-color-scheme="light"]) { --surface-base: #0b1420; --surface-raised: #14202e; --surface-sunken: #0e1a26; --surface-overlay: rgba(20, 32, 46, 0.78); --text-primary: #eaf1f8; --text-secondary: #a9bccf; --text-muted: #6d8299; --text-disabled: #44586d; --border-subtle: #1e2d3f; --border-default: #27394f; --border-strong: #3a516c; --brand-050: #142638; --brand-100: #1a3350; --brand-500: #3aa0dd; --brand-600: #5ab4ec; --status-too-low-bg: #2a251b; --status-too-low-fg: #c9b891; --status-too-low-dot: #b89c68; --status-low-bg: #3a2a12; --status-low-fg: #f0c477; --status-low-dot: #e4a033; --status-good-bg: #0f2a20; --status-good-fg: #6ed4a3; --status-good-dot: #2fb579; --status-high-bg: #0e2240; --status-high-fg: #91bdf2; --status-high-dot: #4f8def; --status-very-high-bg: #3a0e16; --status-very-high-fg: #f09aa7; --status-very-high-dot: #e04663; --warning-bg: #332500; --warning-fg: #f0c477; --warning-border: #7a5b1c; --danger-bg: #3a0e16; --danger-fg: #f09aa7; --danger-border: #7a1f2c; --link: #5ab4ec; --link-hover: #91c7f0; --strip-band-divider-fg: #3a516c; --elevation-tooltip-bg: #1a2a3c; --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03); --elev-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04); --elev-3: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 32px -6px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05); --elev-4: 0 4px 8px rgba(0, 0, 0, 0.5), 0 24px 60px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06); } /* Logo recolour — same payload as the .theme-dark version above, keyed off the OS preference instead of the manual class. Suppressed when the visitor has explicitly chosen light. */ html:not([data-color-scheme="light"]) .nokken-logo path[style*="#2285c6"], html:not([data-color-scheme="light"]) .nokken-logo path[fill="#2285c6"] { fill: #5ab4ec !important; } html:not([data-color-scheme="light"]) .nokken-logo path[style*="#ffffff"] { fill: #14202e !important; } /* Leaflet tiles are externally hosted and ship light; invert + hue-rotate on the tile pane recolours them without touching pins or popups (those live in their own panes). Suppressed when the visitor has explicitly chosen light. */ html:not([data-color-scheme="light"]) .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9); } } /* Manual override — visitor picked dark, regardless of OS. Mirrors the @media block above. Kept in lock-step with the media query payload; when one changes, change both. */ html[data-color-scheme="dark"] { --surface-base: #0b1420; --surface-raised: #14202e; --surface-sunken: #0e1a26; --surface-overlay: rgba(20, 32, 46, 0.78); --text-primary: #eaf1f8; --text-secondary: #a9bccf; --text-muted: #6d8299; --text-disabled: #44586d; --border-subtle: #1e2d3f; --border-default: #27394f; --border-strong: #3a516c; --brand-050: #142638; --brand-100: #1a3350; --brand-500: #3aa0dd; --brand-600: #5ab4ec; --status-too-low-bg: #2a251b; --status-too-low-fg: #c9b891; --status-too-low-dot: #b89c68; --status-low-bg: #3a2a12; --status-low-fg: #f0c477; --status-low-dot: #e4a033; --status-good-bg: #0f2a20; --status-good-fg: #6ed4a3; --status-good-dot: #2fb579; --status-high-bg: #0e2240; --status-high-fg: #91bdf2; --status-high-dot: #4f8def; --status-very-high-bg: #3a0e16; --status-very-high-fg: #f09aa7; --status-very-high-dot: #e04663; --warning-bg: #332500; --warning-fg: #f0c477; --warning-border: #7a5b1c; --danger-bg: #3a0e16; --danger-fg: #f09aa7; --danger-border: #7a1f2c; --link: #5ab4ec; --link-hover: #91c7f0; --strip-band-divider-fg: #3a516c; --elevation-tooltip-bg: #1a2a3c; --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03); --elev-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04); --elev-3: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 32px -6px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05); --elev-4: 0 4px 8px rgba(0, 0, 0, 0.5), 0 24px 60px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06); } html[data-color-scheme="dark"] .nokken-logo path[style*="#2285c6"], html[data-color-scheme="dark"] .nokken-logo path[fill="#2285c6"] { fill: #5ab4ec !important; } html[data-color-scheme="dark"] .nokken-logo path[style*="#ffffff"] { fill: #14202e !important; } html[data-color-scheme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9); }