/* ========================================================================== NomadCheck — design tokens -------------------------------------------------------------------------- Layer 1 Raw palette — the app's values. Never referenced directly by component CSS. Layer 2 Semantic — what component CSS uses. Re-mapped per theme. Layer 3 Scales — type, space, radius, shadow, motion. Both themes are the shipped app palettes. Six values are adjusted for the web because the site puts small text on raised cards more than the app does; every adjustment is listed in the NOTES block at the bottom, with the original kept in Layer 1 so nothing is lost. Verified: every text token clears WCAG 2.1 AA (4.5:1) against every surface token in its own theme. ========================================================================== */ /* ========================================================================== LAYER 1 — RAW PALETTE (theme-independent) ========================================================================== */ :root { /* mint — primary accent */ --mint-400: #7CF3C2; /* hover */ --mint-500: #57E8B0; /* primary fill, both themes */ --mint-600: #10B981; /* positive */ --mint-700: #0E9E6E; /* app mintText — icons/large only in light, see A */ --mint-800: #0B7C56; /* light-theme body text */ --mint-900: #096F4D; /* light-theme text over map gradients */ --mint-950: #06231A; /* dark tint fill */ --mint-tint:#EAF9F2; /* light tint fill */ /* periwinkle / blue — secondary accent */ --peri-400: #7CA5FF; /* dark theme */ --blue-500: #3B6FE0; /* light theme, app blue */ --blue-600: #3768D2; /* light theme as body text */ /* neutrals — dark end */ --ink-950: #05070D; /* app background */ --ink-900: #0B1220; /* phone shell / notch */ --ink-880: #0F1B2E; /* borderBase, deepest light-theme ink */ --ink-850: #0F1729; /* surface deep */ --ink-800: #121B2E; /* card */ --ink-750: #142033; /* surface raised / light-theme ink */ --ink-700: #1A2740; /* surface raised alt */ /* neutrals — mid */ --slate-700: #3C4A66; --slate-650: #616E87; /* light muted, adjusted */ --slate-600: #64728C; /* app light muted */ --slate-580: #676E7B; /* light subtle, adjusted */ --slate-500: #6B7A96; /* app dark faint */ --slate-450: #6A7282; --slate-420: #828B9B; /* light label at 3:1 */ --slate-400: #828FA6; /* dark subtle, adjusted */ --slate-350: #838EA2; /* dark label, adjusted */ --slate-330: #98A2B5; /* app light muted2 */ --slate-300: #9FB0CC; --slate-200: #C5D2E8; /* neutrals — light end */ --paper-200: #EEF1F7; /* surface2 */ --paper-100: #EAF0FA; --paper-50: #F1F5FB; --paper-25: #F3F6FB; /* light bg */ --white: #FFFFFF; /* status */ --amber-500: #E8C34A; --amber-800: #7D6927; --coral-400: #FF8A73; /* dark */ --coral-600: #E2664B; /* light, app coral */ --coral-700: #B2503B; /* light-theme coral as text — see note D */ --red-400: #FF6B6B; --red-450: #FF6A5C; --indigo-400:#7F81F8; --indigo-500:#4B4EF6; /* map + hub gradients (app-supplied, theme-independent) */ --map-stop-1: #EAF1FC; --map-stop-2: #DCE6F5; --map-stop-3: #D3DEF0; } /* ========================================================================== LAYER 2 — SEMANTIC TOKENS ========================================================================== */ /* --- NIGHTFALL (default) ------------------------------------------------ */ :root, [data-theme="nightfall"] { color-scheme: dark; /* surfaces */ --bg: var(--ink-950); --surface-deep: var(--ink-850); --surface: var(--ink-800); --surface-raised: var(--ink-750); --surface-raised-alt: var(--ink-700); --surface-shell: var(--ink-900); --surface-glass: rgb(18 27 46 / 0.62); --surface-accent: var(--mint-950); /* text — all clear 4.5:1 on every surface above */ --text: #F1F5FB; --text-bright: var(--paper-100); --text-secondary: var(--slate-200); --text-muted: var(--slate-300); --text-subtle: var(--slate-400); /* app #6B7A96 — see note A */ --text-label: var(--slate-350); /* app #5C6B85 — see note A */ /* accent */ --accent: var(--mint-500); --accent-hover: var(--mint-400); --accent-text: var(--mint-500); /* mint as text: 9.64–13.02 */ --accent-contrast: var(--ink-950); /* text ON mint fill — see note B */ --accent-tint: var(--mint-950); --secondary: var(--peri-400); --secondary-text: var(--peri-400); /* 6.17–8.33 */ /* status as text */ --positive: var(--mint-600); --warning: var(--amber-500); --danger: var(--red-400); --danger-text: var(--red-400); /* already safe as text here */ --coral: var(--coral-400); --info: var(--indigo-400); /* not #4B4EF6 — see note C */ /* status as fill + the text colour that goes on top */ --positive-fill: var(--mint-600); --positive-contrast: var(--ink-950); --warning-fill: var(--amber-500); --warning-contrast: var(--ink-950); --danger-fill: var(--red-400); --danger-contrast: var(--ink-950); --info-fill: var(--indigo-500); --info-contrast: var(--white); /* lines */ --border: rgb(255 255 255 / 0.08); --border-strong: var(--slate-450); --focus-ring: var(--mint-500); /* Wash behind a modal dialog — --bg at alpha, so the page dims rather than greys. Read by ::backdrop, which inherits it from :root. */ --backdrop: rgb(5 7 13 / 0.74); /* effects */ --glow-accent: radial-gradient(circle, rgb(87 232 176 / 0.16) 0%, transparent 70%); /* The colour a cursor spotlight is drawn in, over a card surface. */ --glow-spotlight: rgb(87 232 176 / 0.14); --grad-map: radial-gradient(circle at 50% 40%, #16233A 0%, #0F1729 55%, #05070D 100%); --grad-hub: linear-gradient(140deg, #0A2A20 0%, #101B2F 100%); --hub-border: rgb(16 185 129 / 0.34); --map-dot: rgb(124 165 255 / 0.22); --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.40); --shadow-md: 0 8px 24px -6px rgb(0 0 0 / 0.55); --shadow-lg: 0 24px 64px -12px rgb(0 0 0 / 0.70); --shadow-accent: 0 12px 40px -10px rgb(87 232 176 / 0.35); } /* --- DAYBREAK ----------------------------------------------------------- */ [data-theme="daybreak"] { color-scheme: light; --bg: var(--paper-25); /* #F3F6FB */ --surface-deep: var(--paper-200); /* #EEF1F7 */ --surface: var(--white); /* card */ --surface-raised: var(--white); --surface-raised-alt: var(--paper-200); --surface-shell: var(--white); /* bgSheet */ --surface-glass: rgb(255 255 255 / 0.72); --surface-accent: var(--mint-tint); /* #EAF9F2 */ --text: var(--ink-750); /* #142033 ink */ --text-bright: var(--ink-880); /* #0F1B2E */ --text-secondary: var(--slate-700); --text-muted: var(--slate-650); /* app #64728C — see note A */ --text-subtle: var(--slate-580); /* app #98A2B5 — see note A */ --text-label: var(--slate-580); /* mint stays the brand fill in both themes, but is far too light as text */ --accent: var(--mint-500); --accent-hover: var(--mint-400); --accent-text: var(--mint-800); /* app #0E9E6E — see note A */ --accent-contrast: var(--ink-750); /* ink on mint = 10.57 */ --accent-tint: var(--mint-tint); --secondary: var(--blue-500); --secondary-text: var(--blue-600); /* #3B6FE0 is 4.09 on surface2 */ --positive: var(--mint-800); --warning: var(--amber-800); --danger: var(--coral-600); /* only on fills — see note D */ --danger-text: var(--coral-700); /* 5.12 on white — see note D */ --coral: var(--coral-600); --info: var(--blue-600); --positive-fill: var(--mint-600); --positive-contrast: var(--ink-750); --warning-fill: var(--amber-500); --warning-contrast: var(--ink-750); --danger-fill: var(--coral-600); --danger-contrast: var(--ink-750); --info-fill: var(--blue-500); --info-contrast: var(--white); --border: rgb(15 27 46 / 0.10); /* borderBase @ alpha */ --border-strong: #81878F; --focus-ring: var(--mint-800); /* Ink rather than a lighter white: over a pale page only a dark wash reads as "the page behind is out of reach". */ --backdrop: rgb(15 27 46 / 0.44); --glow-accent: radial-gradient(circle, rgb(87 232 176 / 0.22) 0%, transparent 70%); /* Heavier than Nightfall's: the same wash over a white card barely reads. */ --glow-spotlight: rgb(87 232 176 / 0.30); --grad-map: radial-gradient(circle at 50% 40%, var(--map-stop-1) 0%, var(--map-stop-2) 55%, var(--map-stop-3) 100%); --grad-hub: linear-gradient(140deg, var(--mint-tint) 0%, var(--map-stop-1) 100%); --hub-border: rgb(16 185 129 / 0.34); --map-dot: rgb(59 111 224 / 0.18); --shadow-sm: 0 1px 2px rgb(15 27 46 / 0.08); --shadow-md: 0 8px 24px -6px rgb(15 27 46 / 0.08); --shadow-lg: 0 24px 64px -12px rgb(15 27 46 / 0.14); --shadow-accent: 0 12px 40px -10px rgb(87 232 176 / 0.45); } /* Themes 3 and 4 go here as further [data-theme="..."] blocks. Each MUST define the complete semantic set — a partial theme silently inherits Nightfall values and breaks contrast in ways nothing will catch. See note E for the warm swatch as a candidate. */ /* ========================================================================== LAYER 3 — SCALES ========================================================================== */ :root { /* type */ --font-display: "REPLACE", system-ui, -apple-system, sans-serif; --font-text: "REPLACE", system-ui, -apple-system, sans-serif; /* System stack only — nothing to self-host. Filenames, dimensions, and any other literal string the reader is meant to copy exactly. */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: clamp(1.25rem, 1.6vw, 1.375rem); --text-2xl: clamp(1.5rem, 2.2vw, 1.875rem); --text-3xl: clamp(1.875rem, 3vw, 2.5rem); --text-h2: clamp(2rem, 4.2vw, 3rem); --text-h2-hero: clamp(2rem, 5vw, 3.5rem); /* visa + final CTA only */ --text-h1: clamp(2.5rem, 6vw, 4.5rem); --text-stat: clamp(2.5rem, 5vw, 4rem); /* stat-bar figures */ --leading-tight: 1.05; --leading-snug: 1.25; --leading-body: 1.6; --tracking-tight: -0.02em; --tracking-wide: 0.12em; /* eyebrows */ /* space — 4px base */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; --section-y: clamp(4rem, 9vh, 7rem); --section-y-hero: clamp(6rem, 14vh, 11rem); /* visa section only */ /* layout */ --header-h: 4.5rem; /* fixed bar, over the hero */ --header-h-scrolled: 3.5rem; /* once .is-scrolled */ --header-line: 2.25rem; /* pinned content line inside the bar */ --max-content: 1200px; --max-prose: 480px; --max-narrow: 800px; /* radius */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 999px; /* motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 200ms; --dur-base: 300ms; --dur-slow: 600ms; --dur-draw: 1400ms; } /* Theme crossfade. Scoped deliberately — a global `* { transition: ... }` fights every other animation on the page and wrecks scroll performance. */ html, body, .theme-surface { transition: background-color var(--dur-base) var(--ease-in-out), color var(--dur-base) var(--ease-in-out), border-color var(--dur-base) var(--ease-in-out); } @media (prefers-reduced-motion: reduce) { html, body, .theme-surface { transition: none; } } /* ========================================================================== NOTES — read before using ========================================================================== A. SIX APP VALUES FAIL AA AS BODY TEXT ON THE WEB. Nightfall #6B7A96 4.65 on --bg, but 3.44–4.13 on card surfaces -> #828FA6 #5C6B85 3.74 on --bg, 2.77 on --surface-raised-alt -> #838EA2 (2.77 fails even the relaxed large-text bar) Daybreak #98A2B5 2.27–2.57 everywhere — unusable as text at all -> #676E7B #64728C 4.48 on --bg, 4.29 on --surface-deep, marginal -> #616E87 #0E9E6E 3.03–3.42 — icons and large text only -> #0B7C56 #3B6FE0 4.09 on --surface-deep as text -> #3768D2 All six are fine in the app if they only ever carry uppercase labels at >=18.66px bold or >=24px. The site puts small text on raised cards far more often, hence the adjustments. Originals are preserved in Layer 1 if you want them back for small-caps labels specifically — just never let them carry a sentence. B. NEVER PUT WHITE TEXT ON THE MINT FILL. #FFFFFF on #57E8B0 = 1.55 unreadable #05070D on #57E8B0 = 13.02 (Nightfall --accent-contrast) #142033 on #57E8B0 = 10.57 (Daybreak --accent-contrast) This is the easiest mistake to make on this palette, because "white on the brand colour" is the reflex for a filled button. The primary CTA appears in the hero, the Pro card, and the final CTA — get it wrong once and it's wrong in the three most-seen places on the page. C. #4B4EF6 INDIGO FLIPS BETWEEN THEMES. Dark: 2.64–3.04 on raised surfaces, unusable as text. Light: 4.79 everywhere, fine. As a fill with white on top it is 5.65 and works in both. Hence --info resolves to #7F81F8 in Nightfall and #3768D2 in Daybreak. D. CORAL #E2664B IS A FILL COLOUR, NOT A TEXT COLOUR. as text on light surfaces: 2.98–3.37 fails white on coral: 3.37 fails ink #142033 on coral: 4.86 passes So --danger-contrast is the ink, not white. If you need coral as text in Daybreak, use #B2503B (5.12 against white) — that is what --danger-text resolves to. Use --danger-text for a red label or chip; --danger stays the fill. E. THE WARM SWATCH IS A GOOD THIRD THEME. The Profile Edit preview chip (#FBF4E9 bg / #EADFCB card / #E08A46 accent) is a preview only, but it works as a real theme: ink #142033 reads 14.97 on the bg and 12.39 on the card, and #E08A46 as a fill with ink on top is 6.15. The accent is NOT usable as text (2.43 on the bg) — it would need a darker text variant, same pattern as mint. F. TEXT OVER THE MAP GRADIENT. The darkest stop #D3DEF0 drops --text-muted to 3.79 and --accent-text to 2.52. Only --text is safe over the full gradient (12.05). If muted text must sit over the map, use #566279; for mint, #096F4D. G. --border is an alpha value, not a hex, so hairlines sit correctly on whichever surface they land on. Decorative hairlines don't need 3:1; --border-strong exists for input outlines and real boundaries. H. Focus rings use --focus-ring: 13.02 on --bg in Nightfall, 4.70 in Daybreak. Never remove an outline without replacing it. ========================================================================== */