/* ============================================================================ 01-TOKENS — iOS-native design system Every value a theme may change lives here. Blocks never hardcode a value. Theme = swap this file only. Structure and behaviour stay identical. ============================================================================ */ @font-face { font-family: Figtree; src: url("../fonts/figtree.woff2") format("woff2"); font-weight: 300 900; /* one variable file covers every weight */ font-style: normal; font-display: swap; size-adjust: 89.6%; /* matches the metrics the contracts were measured in */ } :root { /* --- Typography --------------------------------------------------------- Figtree, self-hosted, one variable file, Latin subset — 19.6 KB. The same font on every site; only colour is themed. WHY A WEBFONT AT ALL, having started on the system stack: the system stack renders differently per platform. Measured, same string, same CSS — Roboto on Android is 8% wider than SF Pro on iOS. Every character limit in block-contracts.mjs was measured on Apple, so on Android the layout was running 8% closer to the edge than the contract claimed. A hosted font removes the variable: the measured limits are now true everywhere. WHY size-adjust: SF Pro is unusually narrow, and every licensable alternative is 10-17% wider at the same nominal size. 89.6% scales Figtree's own metrics to the width the contracts were measured in, so not one limit had to be recalculated. Its x-height then lands at 0.998x of the system font's — the closest of ten candidates — so it reads the same size rather than smaller. The fallback is the old system stack, and because the webfont is metrics- matched to it there is no reflow when the swap happens. That is what makes font-display: swap safe here rather than a layout-shift generator. SF Pro itself cannot be used: Apple licenses it for apps on Apple platforms, not for serving from a website. */ --font-text: Figtree, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif; --font-display: Figtree, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; /* iOS text styles. Fluid where it earns it — clamp() means a longer German string shrinks instead of overflowing. */ --type-large-title: clamp(2rem, 1.55rem + 2.1vw, 2.75rem); /* 32→44 */ --type-title-1: clamp(1.55rem, 1.3rem + 1.15vw, 2rem); /* 25→32 */ --type-title-2: clamp(1.32rem, 1.19rem + 0.6vw, 1.6rem); /* 21→26 */ --type-title-3: 1.25rem; /* 20 */ --type-headline: 1.0625rem; /* 17 semibold */ --type-body: 1.0625rem; /* 17 — iOS body size */ --type-callout: 1rem; /* 16 */ --type-subhead: 0.9375rem; /* 15 */ --type-footnote: 0.8125rem; /* 13 */ --type-caption: 0.75rem; /* 12 */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-body: 1.55; /* iOS tightens tracking as size grows */ --track-large-title: -0.022em; --track-title: -0.018em; --track-body: -0.01em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* --- Spacing — iOS 4pt grid --------------------------------------------- */ --space-2xs: 0.25rem; /* 4 */ --space-xs: 0.5rem; /* 8 */ --space-s: 0.75rem; /* 12 */ --space-m: 1rem; /* 16 — iOS standard inset */ --space-l: 1.25rem; /* 20 */ --space-xl: 1.5rem; /* 24 */ --space-2xl: 2rem; /* 32 */ --space-3xl: 2.75rem; /* 44 */ --space-4xl: 4rem; /* 64 */ --gutter: var(--space-m); --section-gap: clamp(2.5rem, 1.6rem + 4vw, 4.5rem); /* Scrim behind text on imagery. A theme changes this to shift the whole photographic mood — a warm desert theme wants a different cast to a Nordic one. Kept as raw channels so alpha can vary per gradient stop. */ --scrim-rgb: 8 15 28; /* How much accent survives in the dark "emphasis plate" used by the fact band and the CTA band. Derived from --accent, so it must differ per scheme: the dark-mode accent is far lighter, and the same 72% recipe produced a mid-blue that white text sat on at 4.34:1. */ --plate-mix: 72%; --measure: 68ch; /* readable line length */ --content-max: 60rem; /* --- Radii — iOS continuous corners ------------------------------------- */ --radius-s: 8px; --radius-m: 12px; /* iOS list/card default */ --radius-l: 16px; --radius-xl: 22px; --radius-pill: 999px; /* --- Tap targets — Apple HIG minimum is 44pt. Non-negotiable. ----------- */ --tap-min: 44px; /* --- Colour — iOS system palette, light --------------------------------- Semantic names, not literal ones. A theme swaps the hex, never the name. */ --sys-blue: #007AFF; --sys-green: #34C759; --sys-indigo: #5856D6; --sys-orange: #FF9500; --sys-red: #FF3B30; --sys-teal: #30B0C7; --sys-yellow: #FFCC00; --gray: #8E8E93; --gray-2: #AEAEB2; --gray-3: #C7C7CC; --gray-4: #D1D1D6; --gray-5: #E5E5EA; --gray-6: #F2F2F7; /* Backgrounds — iOS "grouped" convention: tinted page, white cards */ --bg: #FFFFFF; --bg-grouped: #F2F2F7; --bg-elevated: #FFFFFF; --bg-tertiary: #F2F2F7; /* Labels — iOS uses alpha, so text sits correctly on any backdrop */ --label: rgba(0, 0, 0, 0.92); /* iOS ships secondaryLabel at 0.60 alpha, which composites to 3.62:1 on white and fails WCAG AA for small text. 0.73 measured 4.74:1 and was fine while every surface was white. Once the themes gave tinted surfaces real colour, the same alpha landed at 4.43:1 on the darkest of them (aurora's --bg-tertiary) — under AA, on eyebrows, timeline durations and footer links. 0.78 clears 4.5:1 on every tinted surface of all ten themes with room to spare, and is visually indistinguishable. Dark mode's 0.62 already gives 6.26:1. */ --label-secondary: rgba(60, 60, 67, 0.78); --label-tertiary: rgba(60, 60, 67, 0.32); --separator: rgba(60, 60, 67, 0.22); --separator-opaque:#C6C6C8; /* Accent — the theme's identity colour. Fjord blue for Stavanger. */ --accent: #0B6BCB; --accent-hover: #0A5CAF; --accent-soft: #E8F1FC; --on-accent: #FFFFFF; /* CTA — must be high-contrast and pop. Never subtle, never hidden. */ /* #C2410C, not a brighter orange: white-on-#FF6B00 measures 2.86:1, which fails WCAG AA. This is 5.18:1 and still unmistakably an orange CTA. Contrast and "pops" are not in conflict — an unreadable button pops less. */ --cta: #C2410C; --cta-hover: #9A3412; --on-cta: #FFFFFF; --cta-shadow: 0 1px 2px rgba(194, 65, 12, 0.30), 0 6px 18px -4px rgba(194, 65, 12, 0.45); /* Rating stars sit on white cards. #FF9500 measures 2.20:1; this is 3.19:1, clearing the 3:1 WCAG non-text minimum. */ /* Stars appear only inside the review blocks — CLAUDE.md keeps them out of the hero and the stat strip. #D97706 measured 3.19:1 on white, which fails AA; this is 4.84:1 and still unmistakably amber. */ --star: #9D6607; /* --cta is a FILL. This is the same colour used as TEXT on a surface, and it has to be a separate token because the two have opposite requirements: a fill wants to be dark enough to carry white, text wants to be light enough to be read against a dark card. Collapsing them is exactly what broke .callout--warn when --cta was darkened for white labels. */ --cta-ink: var(--cta); /* Semantic success colour for "best option" markers. #34C759 (iOS systemGreen) measures 2.22:1 on white and is unreadable as text. */ --success: #15803D; /* --- Elevation — iOS shadows are soft and low-contrast ------------------ */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.06), 0 6px 16px -6px rgba(0, 0, 0, 0.10); --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.07), 0 14px 34px -10px rgba(0, 0, 0, 0.16); /* --- Motion — iOS default curve ---------------------------------------- */ --ease: cubic-bezier(0.32, 0.72, 0, 1); --dur-fast: 0.18s; --dur: 0.28s; } /* --- Dark mode — iOS dark system values ----------------------------------- */ /* Dark tokens live in one place and are applied two ways: · by system preference, unless the visitor has explicitly chosen light · by explicit choice, which always wins The footer toggle writes data-theme and remembers it. Without the :not([data-theme="light"]) guard, a visitor on a dark OS could never choose light. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --plate-mix: 44%; --bg: #000000; --bg-grouped: #000000; --bg-elevated: #1C1C1E; --bg-tertiary: #2C2C2E; --label: rgba(255, 255, 255, 0.96); --label-secondary: rgba(235, 235, 245, 0.62); --label-tertiary: rgba(235, 235, 245, 0.32); --separator: rgba(84, 84, 88, 0.60); --separator-opaque:#38383A; --sys-blue: #0A84FF; --accent: #4FA3F7; --accent-hover: #6FB5F9; --accent-soft: #16283D; /* Dark mode lightens the accent, so anything sitting ON it must darken. White on #4FA3F7 is 2.65:1; this is 7.15:1. Fixes factband, ctaband, filled buttons, step numerals and the active anchor pill in one line. */ --on-accent: #00121F; /* The CTA carries WHITE text in both schemes — set by Oleksandr 2026-08-10, so the booking button reads the same however the visitor's device is set. That forces the fill darker, because white needs a dark ground. But a dark button on a black page stops popping, and "CTAs must pop" is a hard rule here. So the fill is picked from the window where BOTH hold rather than by taste: white-on-#AF470B is 5.63:1, and #AF470B against the black page is 3.73:1. Hover darkens rather than brightens — brightening was the obvious move and it dropped white text to 4.19:1, below AA, in a state nothing was checking. */ --cta: #AF470B; --cta-hover: #7A3208; --on-cta: #FFFFFF; /* The fill went dark so white could sit on it; the INK has to go the other way to stay readable as text. 5.88:1 on a card, 7.26:1 on the page. */ --cta-ink: #F67023; /* Amber reads fine on a dark card, so the light-mode darkening is undone. */ --star: #F5A524; --success: #4ADE80; --gray-5: #2C2C2E; --gray-6: #1C1C1E; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.6); } } :root[data-theme="dark"] { --plate-mix: 44%; --bg: #000000; --bg-grouped: #000000; --bg-elevated: #1C1C1E; --bg-tertiary: #2C2C2E; --label: rgba(255, 255, 255, 0.96); --label-secondary: rgba(235, 235, 245, 0.62); --label-tertiary: rgba(235, 235, 245, 0.32); --separator: rgba(84, 84, 88, 0.60); --separator-opaque:#38383A; --sys-blue: #0A84FF; --accent: #4FA3F7; --accent-hover: #6FB5F9; --accent-soft: #16283D; /* Dark mode lightens the accent, so anything sitting ON it must darken. White on #4FA3F7 is 2.65:1; this is 7.15:1. Fixes factband, ctaband, filled buttons, step numerals and the active anchor pill in one line. */ --on-accent: #00121F; /* The CTA carries WHITE text in both schemes — set by Oleksandr 2026-08-10, so the booking button reads the same however the visitor's device is set. That forces the fill darker, because white needs a dark ground. But a dark button on a black page stops popping, and "CTAs must pop" is a hard rule here. So the fill is picked from the window where BOTH hold rather than by taste: white-on-#AF470B is 5.63:1, and #AF470B against the black page is 3.73:1. Hover darkens rather than brightens — brightening was the obvious move and it dropped white text to 4.19:1, below AA, in a state nothing was checking. */ --cta: #AF470B; --cta-hover: #7A3208; --on-cta: #FFFFFF; /* The fill went dark so white could sit on it; the INK has to go the other way to stay readable as text. 5.88:1 on a card, 7.26:1 on the page. */ --cta-ink: #F67023; /* Amber reads fine on a dark card, so the light-mode darkening is undone. */ --star: #F5A524; --success: #4ADE80; --gray-5: #2C2C2E; --gray-6: #1C1C1E; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.6); }