/* GENERATED by the stageLandingTokens Gradle task — do not edit. Source of truth: frontend/src/styles/tokens/{colors,typography,layout}.css */ /* * GoCycling.ai — Slipstream color tokens. * * Source of truth: the "GoCycling.ai Design System" project (tokens/colors.css). * Names map 1:1 to the design system and to the generated Swift extensions * (`--gc-primary` -> `Color.gcPrimary` in ios/RoveRoutes/Extensions/Color+RoveRoutes.swift). * Keep both sides in step when editing. * * Light = :root, dark = [data-theme="dark"] on . * Dark is NOT auto-activated from prefers-color-scheme: every tile layer we ship * (OSM / CyclOSM / OpenTopo / satellite) is light, so dark chrome around a bright * map reads as broken. Wire it up together with a dark basemap. */ :root { /* brand */ --gc-primary: #0e6e80; --gc-primary-hover: #0b5b6b; --gc-primary-active: #094c59; --gc-primary-highlight: rgba(14, 110, 128, 0.08); --gc-on-primary: #ffffff; /* surfaces */ --gc-bg: #f6f8fa; --gc-surface-1: #ffffff; --gc-surface-2: #eef2f6; --gc-surface-3: #e3e9f0; /* text */ --gc-text: #141d28; --gc-text-secondary: #4c5866; /* #657283 clears WCAG AA 4.5:1 on both white (4.90) and --gc-bg (4.60). The design system's original #8593a2 was 3.14:1 — fine for icons/placeholders, failing for the real informational text this token also carries (route stats, chart axes, legends). Raised at the token level so every call site is compliant at once (UI/UX review). */ --gc-text-muted: #657283; --gc-text-inverse: #f6f8fa; /* borders */ --gc-border: #dde3ea; --gc-border-subtle: #e9eef4; /* semantic — amber carries advisory/warning, green/red stay reserved */ --gc-amber: #b96f08; --gc-amber-bg: #fdf3e3; --gc-amber-text: #8a5306; --gc-amber-border: #f0d9ae; --gc-error: #d43a3a; --gc-error-bg: #fdf1f1; --gc-error-text: #a82c2c; --gc-success: #1a9e5c; --gc-success-bg: #eefaf3; --gc-success-text: #157a48; /* third-party brand */ --gc-strava: #fc4c02; /* route rendering */ --gc-route: #0e6e80; --gc-route-casing: #0d1826; --gc-route-alt: #e08a0b; --gc-route-ghost-1: #94a1b0; --gc-route-ghost-2: #b6c1cd; /* waypoint roles — petrol family (2026-07-25); role reads by letter + tone, so markers never collide with UI accents or semantic green/red. --gc-wp-via is the border + number on a white disc, not a fill. The number needs its own darker ink: --gc-wp-via on white is 3.55:1, which clears the 3:1 required of a UI boundary but not the 4.5:1 that the 12px label needs. --gc-wp-via-ink is 5.90:1 on the disc. */ --gc-wp-start: #0e6e80; --gc-wp-via: #3d93a6; --gc-wp-via-ink: #0e6e80; --gc-wp-end: #094c59; /* surface-composition data colors (SurfaceBar) */ --gc-surf-paved: #6e7a87; --gc-surf-gravel: #d97706; --gc-surf-unpaved: #92400e; --gc-surf-dirt: #78350f; --gc-surf-grass: #16a34a; --gc-surf-sand: #e2ac07; --gc-surf-concrete: #9aa6b2; --gc-surf-other: #a6adb5; /* overlays */ --gc-scrim: rgba(13, 24, 38, 0.45); --gc-pill-overlay: rgba(10, 16, 24, 0.62); --gc-focus-ring: var(--gc-primary); } [data-theme='dark'] { --gc-primary: #4fb3c6; --gc-primary-hover: #6ec2d2; --gc-primary-active: #8bd0dd; --gc-primary-highlight: rgba(79, 179, 198, 0.15); --gc-on-primary: #06272e; --gc-bg: #0c141e; --gc-surface-1: #131e2b; --gc-surface-2: #1a2736; --gc-surface-3: #223143; --gc-text: #e9eff6; --gc-text-secondary: #9fadbd; /* #7d8b9c clears 4.5:1 on the dark surfaces (4.84 on --gc-surface-1); the original #63707f was 3.33:1. Matches the light-theme AA fix above. */ --gc-text-muted: #7d8b9c; --gc-text-inverse: #141d28; --gc-border: #243342; --gc-border-subtle: #1c2938; --gc-amber: #f0a336; --gc-amber-bg: rgba(240, 163, 54, 0.12); --gc-amber-text: #f5bd6b; --gc-amber-border: rgba(240, 163, 54, 0.35); --gc-error: #e05d5d; --gc-error-bg: rgba(224, 93, 93, 0.12); --gc-error-text: #ef8f8f; --gc-success: #34c27d; --gc-success-bg: rgba(52, 194, 125, 0.12); --gc-success-text: #6cd7a3; --gc-route: #4fb3c6; --gc-route-casing: #04080d; --gc-route-alt: #f0a336; --gc-route-ghost-1: #4d5a68; --gc-route-ghost-2: #39434f; --gc-wp-start: #4fb3c6; --gc-wp-via: #7cc6d4; /* On the dark disc (--gc-surface-1 #131e2b) the via tone is already 8.72:1, so the ink and the border stay the same color here. */ --gc-wp-via-ink: #7cc6d4; --gc-wp-end: #26707f; --gc-scrim: rgba(2, 6, 10, 0.6); --gc-pill-overlay: rgba(4, 8, 13, 0.72); } /* * GoCycling.ai — Slipstream typography. * * Space Grotesk (display / numerals) + Instrument Sans (UI) + JetBrains Mono (data). * The font files are pulled in via in index.html rather than * an @import here — an @import inside an @import-ed sheet chains two round-trips * before the first paint. Keep the two in step when changing weights. * * Rule of thumb: any number a rider cares about (distance, ascent, duration, grade) * is set in the display font; its unit stays in the muted body font. */ :root { --gc-font-display: 'Space Grotesk', -apple-system, sans-serif; --gc-font-body: 'Instrument Sans', -apple-system, 'Segoe UI', sans-serif; --gc-font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* type scale — shorthand: weight size/line-height family */ --gc-type-display-xl: 700 32px/1.15 var(--gc-font-display); /* page heroes, big stats */ --gc-type-display: 700 24px/1.2 var(--gc-font-display); /* screen titles */ --gc-type-stat: 700 22px/1.1 var(--gc-font-display); /* route stats numerals */ --gc-type-title: 600 18px/1.3 var(--gc-font-display); /* panel/card titles */ --gc-type-heading: 600 15px/1.4 var(--gc-font-body); /* section headings */ --gc-type-body: 400 14px/1.5 var(--gc-font-body); /* default UI text */ --gc-type-body-medium: 500 14px/1.5 var(--gc-font-body); --gc-type-body-sm: 400 13px/1.45 var(--gc-font-body); /* chat bubbles, dense UI */ --gc-type-caption: 400 12px/1.4 var(--gc-font-body); /* helper text */ --gc-type-micro: 500 11px/1.3 var(--gc-font-body); /* badges, legends */ --gc-type-overline: 600 10.5px/1.3 var(--gc-font-body); /* + uppercase + .1em tracking */ --gc-type-mono: 400 12px/1.5 var(--gc-font-mono); /* phase labels, keys, coords */ --gc-tracking-overline: 0.1em; } /* GoCycling.ai — Slipstream spacing, radius, elevation, motion, breakpoints, z-index. */ :root { /* spacing — 4px grid */ --gc-space-1: 4px; --gc-space-2: 8px; --gc-space-3: 12px; --gc-space-4: 16px; --gc-space-5: 20px; --gc-space-6: 24px; --gc-space-8: 32px; --gc-space-10: 40px; --gc-space-12: 48px; --gc-space-16: 64px; /* radius — Slipstream is sharp; pills are for chips only, nothing over 12px */ --gc-radius-sm: 6px; --gc-radius-md: 8px; --gc-radius-lg: 10px; --gc-radius-xl: 12px; --gc-radius-pill: 999px; /* elevation — cool-tinted, overlays only. Cards on the page use a border, no shadow. */ --gc-shadow-sm: 0 1px 2px rgba(13, 24, 38, 0.08); --gc-shadow-md: 0 4px 12px rgba(13, 24, 38, 0.12); --gc-shadow-lg: 0 8px 28px rgba(13, 24, 38, 0.18); /* motion */ --gc-dur-fast: 120ms; --gc-dur-base: 180ms; --gc-dur-slow: 260ms; --gc-ease: cubic-bezier(0.2, 0, 0, 1); --gc-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); /* breakpoints — documentation tokens; use the values directly in media queries. 1280 (xl) is the only shell-changing breakpoint; the rest are content density. */ --gc-bp-sm: 480px; --gc-bp-md: 768px; --gc-bp-lg: 1024px; --gc-bp-xl: 1280px; --gc-bp-2xl: 1600px; /* touch */ --gc-touch-min: 44px; /* z-index */ --gc-z-map-controls: 10; --gc-z-sheet: 30; --gc-z-menu: 50; --gc-z-dialog: 60; --gc-z-toast: 70; }