/* ============================================================ FLY CAPE TOWN — fct-theme.css (canonical shared theme) ------------------------------------------------------------ Semantic design tokens derived from the marketing site's colors_and_type.css (ocean/sky brand palette + logo cyan). Each app COPIES this file verbatim (no build-time sharing) — see apps/shared/README.md. Brand core: cyan #129FC0 electric #2FC1D3 teal-deep #0C7CA4 navy #1B4664 ink #02081C neutrals #C5CAC9 / #D4DEDF Fonts: Archivo (display) · Hanken Grotesk (body) · Baloo 2 (accent) Light scheme is the default (:root). Dark scheme activates via [data-theme="dark"] on or . All text tokens are chosen for ≥7:1 (WCAG AAA) contrast against their paired surface — the dark scheme is tuned for sunlight readability on Signal Hill. ============================================================ */ :root { /* ---- Brand primitives ---- */ --fct-cyan-electric: #2FC1D3; --fct-cyan: #129FC0; --fct-teal-deep: #0C7CA4; --fct-blue-steel: #719FAF; --fct-navy: #1B4664; --fct-ink: #02081C; --fct-grey: #C5CAC9; --fct-grey-pale: #D4DEDF; --fct-white: #FFFFFF; --fct-cyan-050: #E6F7FA; --fct-cyan-100: #C2ECF3; --fct-cyan-200: #8FDDEB; --fct-cyan-300: #57CCDF; --fct-cyan-400: #2FC1D3; --fct-cyan-500: #129FC0; --fct-cyan-600: #0C7CA4; --fct-cyan-700: #0B5E7E; --fct-cyan-800: #103F58; --fct-cyan-900: #102A3D; --fct-ink-900: #02081C; --fct-ink-850: #081227; --fct-ink-800: #0E2036; --fct-ink-700: #16304A; --fct-ink-600: #1B4664; --fct-ink-500: #2C5A7C; /* ---- Semantic: surfaces (light) ---- */ --t-bg: #FFFFFF; --t-bg-subtle: #F5F7F8; --t-surface: #FFFFFF; --t-surface-raised: #ECEFF0; --t-line: #D4DEDF; --t-line-strong: #9AA6A8; /* ---- Semantic: text (≥7:1 on --t-bg / --t-surface) ---- */ --t-text-1: #02081C; /* 19.9:1 on white */ --t-text-2: #1B4664; /* 10.9:1 on white */ --t-text-muted: #44555B; /* 8.0:1 on white */ --t-text-on-primary: #02081C; /* ---- Semantic: actions ---- */ --t-primary: #129FC0; --t-primary-hover: #0C7CA4; --t-primary-press: #0B5E7E; --t-accent: #2FC1D3; --t-link: #0B5E7E; /* ---- Semantic: state (harmonised to palette) ---- */ --t-success: #1E7D4D; /* green family of #2FBF71 darkened for light bg */ --t-warn: #8A5B00; --t-danger: #B3261E; --t-success-soft: rgba(47,191,113,.16); --t-warn-soft: rgba(255,194,51,.20); --t-danger-soft: rgba(255,77,94,.14); /* ---- Focus ring ---- */ --t-focus-ring: 0 0 0 3px rgba(18,159,192,.45); /* ---- Radii ---- */ --t-radius-xs: 6px; --t-radius-sm: 10px; --t-radius-md: 16px; --t-radius-lg: 24px; --t-radius-pill: 999px; /* ---- Shadows ---- */ --t-shadow-sm: 0 2px 8px rgba(2,8,28,.08); --t-shadow-md: 0 8px 24px rgba(2,8,28,.10); --t-shadow-lg: 0 18px 48px rgba(2,8,28,.16); --t-shadow-cyan: 0 12px 32px rgba(18,159,192,.32); /* ---- Type families (link Google Fonts per app; full system fallback) ---- */ --t-font-display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, system-ui, sans-serif; --t-font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, system-ui, sans-serif; --t-font-rounded: 'Baloo 2', 'Hanken Grotesk', system-ui, sans-serif; } /* ============================================================ DARK SCHEME — night-sky ink ramp, sunlight-readable. Every text token ≥7:1 against its paired surface: text-1 #EAF2F6 on bg #02081C ........ 17.6:1 text-2 #C2D2D8 on surface #081227 ... 12.0:1 muted #B9C6CC on surface #081227 ... 10.7:1 (9.4:1 on raised) primary fg #02081C on #2FC1D3 ....... 9.2:1 success #5FE3A1 on #02081C .......... 12.3:1 warn #FFC233 on #02081C .......... 12.4:1 danger #FF8D97 on #02081C .......... 9.0:1 (7.4:1 on raised) ============================================================ */ [data-theme="dark"] { --t-bg: #02081C; --t-bg-subtle: #081227; --t-surface: #081227; --t-surface-raised: #0E2036; --t-line: #16304A; --t-line-strong: #2C5A7C; --t-text-1: #EAF2F6; --t-text-2: #C2D2D8; --t-text-muted: #B9C6CC; --t-text-on-primary: #02081C; /* On dark, electric cyan carries the action; brand cyan is the press */ --t-primary: #2FC1D3; --t-primary-hover: #57CCDF; --t-primary-press: #129FC0; --t-accent: #57CCDF; --t-link: #57CCDF; --t-success: #5FE3A1; --t-warn: #FFC233; --t-danger: #FF8D97; --t-success-soft: rgba(95,227,161,.16); --t-warn-soft: rgba(255,194,51,.16); --t-danger-soft: rgba(255,141,151,.16); --t-focus-ring: 0 0 0 3px rgba(87,204,223,.55); --t-shadow-sm: 0 2px 8px rgba(0,0,0,.45); --t-shadow-md: 0 8px 24px rgba(0,0,0,.50); --t-shadow-lg: 0 18px 48px rgba(0,0,0,.60); --t-shadow-cyan: 0 12px 32px rgba(47,193,211,.28); }