@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,560;9..144,640&family=Hanken+Grotesk:wght@400;500;600&display=swap"); /* tokens.css — design tokens for Burning Swell. Identity: "Dawn Patrol" — the warm, golden-hour mood of a sunrise surf check. Warm-paper light, warm-ink dark, a sodium-amber accent that reads like a low sun on water. Restrained, low-chroma chrome so the wave-energy heatmap stays the loudest thing on the page. Theme is a real three-state control, not just an OS sniff: * default → follow `prefers-color-scheme' * → force dark * → force light (app.js persists the choice in localStorage) Type: Fraunces (opinionated optical serif) carries the wordmark, headings and the hero now-cast number; Hanken Grotesk (warm, quiet, deliberately not Inter) does the UI body; mono stays for tabular forecast numerals. All three degrade to a system stack offline. */ :root { --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; /* Type scale — tokens, so no component hardcodes a px/rem size and `--text-sm' etc. actually resolve (they were referenced but never defined before). */ --text-xs: 0.75rem; --text-sm: 0.85rem; --text-base: 1rem; --text-lg: 1.15rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-hero: clamp(2.75rem, 7vw, 4.25rem); --header-h: 3.5rem; --tabbar-h: 3.5rem; /* bs-ppyb mobile bottom tab bar (bs-1wqz) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; /* ---- Light: warm sand + paper ------------------------------- */ --bg: #fbf6ef; /* warm sand */ --bg-elevated: #ffffff; --bg-subtle: #f3ebdd; --fg: #1a1410; /* warm near-black */ --fg-muted: #6b5f4f; --fg-subtle: #9a8c76; --border: #e7ddcc; --accent: #e8852b; /* sodium amber — low sun on water */ --accent-fg: #1a1410; /* dark text on amber: legible */ /* `--accent' (#e8852b) on the warm-sand bg is only 2.5:1 — fine as a fill / underline / border, but it FAILS WCAG AA as small text. When the accent must CARRY text (the active nav link), use this darkened amber instead: 5.0:1 on --bg, same hue family (bs-a38). */ --accent-strong: #a85309; --accent-soft: rgba(232, 133, 43, 0.14); --tide-observed: #1f7a8c; /* cool teal — measured tide vs the amber prediction (bs-pajo.2) */ /* Atmosphere — a barely-there warm wash so the page reads as a lit surface, not a flat fill. Used by the body backdrop. */ --atmo-1: rgba(232, 133, 43, 0.06); --atmo-2: rgba(232, 133, 43, 0.00); --shadow-color: rgba(60, 38, 12, 0.16); /* Wave-energy heatmap (surf-forecast.com ramp; integer kJ → colour) */ --energy-0: #f3ebdd; --energy-20: #e6d8be; --energy-40: #fde8c2; --energy-80: #fbd089; --energy-120: #f5a93c; --energy-200: #ef7d1e; --energy-400: #e0461f; --energy-800: #7f1d1d; /* Rating stars (MSW split-bar) */ --rating-on: #e8852b; --rating-faded: #a8642a; --rating-off: #e7ddcc; /* Wind-state — semantic, theme-aware (all six `f:wind-state' keywords + a neutral default). Earthy in the warm world; glassy is a deliberate cool note so "perfect" stands out. */ --wind-offshore-bg: #e6ead5; --wind-offshore-fg: #4a5a2a; --wind-cross-bg: #f1e3cc; --wind-cross-fg: #7a5a2a; --wind-onshore-bg: #f4dbd1; --wind-onshore-fg: #8a3a28; --wind-glassy-bg: #dce8e6; --wind-glassy-fg: #2c5550; --wind-default-bg: #f3ebdd; --wind-default-fg: #6b5f4f; /* Weather status palette (bs-162.1; renamed bs-sjnh.5) — the --st-* tokens weather.css maps the verdict band, source-card LEDs and matrix cells onto. Ported from the CLOG ui/tokens.css (all three theme blocks); WAITING is the calm, uncoloured lamp. Light values. */ --st-current: #2f7d5b; --st-degraded: #c47a0b; --st-atrisk: var(--energy-200); --st-nottrust: var(--energy-400); --st-running: var(--accent); --st-waiting: var(--fg-subtle); --st-superseded: var(--rating-off); /* Weather design-system tokens (bs-sjnh.5). The /weather surface (design/weather.css) names states semantically; the six below ALIAS the --st-* palette above so there is ONE source of truth — they resolve per-theme through the cascaded --st-* value, so they are defined ONCE here, not re-stated in the dark blocks. --superseded is a distinct design mid-tone; the *-soft fills, the composite --shadow, the map --sea/--land, the chrome --grid-line/--scan and --radius are new. Light values below. */ --ok: var(--st-current); --warn: var(--st-degraded); --risk: var(--st-atrisk); --bad: var(--st-nottrust); --run: var(--st-running); --idle: var(--st-waiting); --superseded: #c8bca4; --ok-soft: rgba(47, 125, 91, 0.12); --warn-soft: rgba(196, 122, 11, 0.14); --bad-soft: rgba(224, 70, 31, 0.12); --run-soft: rgba(232, 133, 43, 0.14); --shadow: 0 1px 2px rgba(60, 38, 12, 0.05), 0 10px 28px -14px rgba(60, 38, 12, 0.2); --sea: #dfe9ec; --land: #efe6d6; --grid-line: rgba(154, 140, 118, 0.16); --scan: rgba(232, 133, 43, 0.02); --radius: 0.6rem; } /* Dark token set, factored so it can be applied by BOTH the OS media query (when the user hasn't overridden) and an explicit `data-theme="dark"'. The `:not([data-theme="light"])' guard lets a forced-light page win over a dark OS. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #14110e; /* warm ink */ --bg-elevated: #1f1a14; --bg-subtle: #2a2218; --fg: #f3ede3; --fg-muted: #a8997f; --fg-subtle: #7c7058; --border: #2e2619; --accent: #f59e3c; --accent-fg: #14110e; --accent-strong: var(--accent); /* bright amber is already AA as text on warm-ink (bs-a38) */ --accent-soft: rgba(245, 158, 60, 0.16); --tide-observed: #5fc6d0; /* cool teal — measured tide vs the amber prediction (bs-pajo.2) */ --atmo-1: rgba(245, 158, 60, 0.10); --atmo-2: rgba(245, 158, 60, 0.00); --shadow-color: rgba(0, 0, 0, 0.55); --energy-0: #2a2218; --energy-20: #3a3020; --energy-40: #6e4a12; --energy-80: #9a5e0d; --energy-120: #c47a0b; --energy-200: #e07a1e; --energy-400: #dc4626; --energy-800: #7f1d1d; --rating-on: #f59e3c; --rating-faded: #9a5e0d; --rating-off: #2e2619; --wind-offshore-bg: #2a331c; --wind-offshore-fg: #b7c98c; --wind-cross-bg: #33291a; --wind-cross-fg: #c9a86a; --wind-onshore-bg: #3a211b; --wind-onshore-fg: #e0907c; --wind-glassy-bg: #1c302e; --wind-glassy-fg: #8fc9c0; --wind-default-bg: #2a2218; --wind-default-fg: #a8997f; /* Weather status palette — dark values (bs-162.1). */ --st-current: #4fb487; --st-degraded: #d8901f; --st-atrisk: var(--energy-200); --st-nottrust: var(--energy-400); --st-running: var(--accent); --st-waiting: var(--fg-subtle); --st-superseded: var(--rating-off); /* Weather design-system tokens — dark values (bs-sjnh.5). The --ok/--warn/etc. aliases + --radius are inherited from :root. */ --superseded: #5a4f3c; --ok-soft: rgba(79, 180, 135, 0.15); --warn-soft: rgba(216, 144, 31, 0.16); --bad-soft: rgba(220, 70, 38, 0.16); --run-soft: rgba(245, 158, 60, 0.16); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 36px -16px rgba(0, 0, 0, 0.65); --sea: #11171c; --land: #231d15; --grid-line: rgba(124, 112, 88, 0.13); --scan: rgba(245, 158, 60, 0.016); } } /* Explicit override — identical dark set, applied regardless of OS. */ :root[data-theme="dark"] { --bg: #14110e; --bg-elevated: #1f1a14; --bg-subtle: #2a2218; --fg: #f3ede3; --fg-muted: #a8997f; --fg-subtle: #7c7058; --border: #2e2619; --accent: #f59e3c; --accent-fg: #14110e; --accent-strong: var(--accent); /* bright amber is already AA as text on warm-ink (bs-a38) */ --accent-soft: rgba(245, 158, 60, 0.16); --tide-observed: #5fc6d0; /* cool teal — measured tide vs the amber prediction (bs-pajo.2) */ --atmo-1: rgba(245, 158, 60, 0.10); --atmo-2: rgba(245, 158, 60, 0.00); --shadow-color: rgba(0, 0, 0, 0.55); --energy-0: #2a2218; --energy-20: #3a3020; --energy-40: #6e4a12; --energy-80: #9a5e0d; --energy-120: #c47a0b; --energy-200: #e07a1e; --energy-400: #dc4626; --energy-800: #7f1d1d; --rating-on: #f59e3c; --rating-faded: #9a5e0d; --rating-off: #2e2619; --wind-offshore-bg: #2a331c; --wind-offshore-fg: #b7c98c; --wind-cross-bg: #33291a; --wind-cross-fg: #c9a86a; --wind-onshore-bg: #3a211b; --wind-onshore-fg: #e0907c; --wind-glassy-bg: #1c302e; --wind-glassy-fg: #8fc9c0; --wind-default-bg: #2a2218; --wind-default-fg: #a8997f; /* Weather status palette — dark values (bs-162.1). */ --st-current: #4fb487; --st-degraded: #d8901f; --st-atrisk: var(--energy-200); --st-nottrust: var(--energy-400); --st-running: var(--accent); --st-waiting: var(--fg-subtle); --st-superseded: var(--rating-off); /* Weather design-system tokens — dark values (bs-sjnh.5). The --ok/--warn/etc. aliases + --radius are inherited from :root. */ --superseded: #5a4f3c; --ok-soft: rgba(79, 180, 135, 0.15); --warn-soft: rgba(216, 144, 31, 0.16); --bad-soft: rgba(220, 70, 38, 0.16); --run-soft: rgba(245, 158, 60, 0.16); --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 36px -16px rgba(0, 0, 0, 0.65); --sea: #11171c; --land: #231d15; --grid-line: rgba(124, 112, 88, 0.13); --scan: rgba(245, 158, 60, 0.016); }