/* ===================================================================== RMK DESIGN TOKENS: RMK Retail --------------------------------------------------------------------- ONE TOKEN FILE. No hex value may appear anywhere else in the app. Every other stylesheet and template reads from these variables. Source of truth: docs/design/website/ (approved 5 October 2026). THE LAWS: 1. #00E5FF (cyan) is the brand colour. It is used as a BACKGROUND or as text/accent ON BLACK. Never as text on white (1.54:1, fails). Never with white text on it (fails). Black text on it: 12.87:1. 2. Headings are plain and heavy (800) on these pages, as in the approved mock-ups. Cyan appears in headings only on black. 3. Buttons: cyan background, black text, label centred. 4. Cyan means "do the work here". Blue means "leave this page". 5. Green / amber / red are for STATES only, never decoration. Measured contrast (WCAG): ratio use #0A0A0A on #00E5FF 12.87 buttons, badges, CTA band #00E5FF on #0A0A0A 12.87 hero accent, nav, footer links #0A0A0A on #FFFFFF 19.80 body text #57606A on #FFFFFF 6.39 muted text #57606A on #F5F7F9 5.95 muted text on page bg #A8B3BD on #0A0A0A 9.28 muted text on black #D0D7DE on #0A0A0A 13.0 nav links on black #0B57D0 on #FFFFFF 6.39 "leave this page" link #1A7F37 / #9A6700 / #C62828 on white 5.08 / 4.87 / 5.62 states ===================================================================== */ :root { /* ---- Brand ---------------------------------------------------- */ --rmk-brand: #00E5FF; /* primary: never text on white */ --rmk-brand-hover: #00C8E0; /* button hover, tint borders */ --rmk-brand-tint: #E0FBFF; /* soft brand panel, black text */ --rmk-brand-glow: rgba(0, 229, 255, 0.18); /* ---- Neutrals ------------------------------------------------- */ --rmk-black: #0A0A0A; /* text, header, footer, bands */ --rmk-white: #FFFFFF; --rmk-grey-100: #F5F7F9; /* page background */ --rmk-grey-200: #EEF2F5; /* map background */ --rmk-grey-300: #D0D7DE; /* borders; nav links on black */ --rmk-grey-600: #57606A; /* muted text, help text */ --rmk-grey-on-black: #A8B3BD; /* muted text on black only */ --rmk-black-raised: #1F2328; /* panel on black (facility card) */ --rmk-black-line: #2D333B; /* border on black */ --rmk-shadow-colour: rgba(10, 10, 10, 0.25); /* ---- "Leave this page" accent --------------------------------- */ --rmk-leave: #0B57D0; --rmk-leave-hover: #0842A0; /* ---- States (never decoration) -------------------------------- */ --rmk-success: #1A7F37; --rmk-success-tint: #E6F4EA; --rmk-warning: #9A6700; --rmk-warning-tint: #FFF4D6; --rmk-danger: #C62828; --rmk-danger-tint: #FDECEC; /* ---- Semantic aliases (use these in components) --------------- */ --rmk-text: var(--rmk-black); --rmk-text-muted: var(--rmk-grey-600); --rmk-bg-page: var(--rmk-grey-100); --rmk-bg-surface: var(--rmk-white); --rmk-border: var(--rmk-grey-300); --rmk-focus-ring: 0 0 0 3px var(--rmk-black), 0 0 0 6px var(--rmk-brand); /* ---- Type ----------------------------------------------------- */ --rmk-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --rmk-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* Sizes used by the approved mock-ups */ --rmk-fs-2xs: 0.75rem; /* 12px: tiny badges, bottom-nav labels */ --rmk-fs-xs: 0.8125rem; /* 13px: captions, footnotes */ --rmk-fs-sm: 0.875rem; /* 14px: secondary lines, small links */ --rmk-fs-nav: 0.9375rem; /* 15px: nav, card text */ --rmk-fs-base: 1rem; /* 16px: body (never smaller in forms) */ --rmk-fs-md: 1.125rem; /* 18px: lead, big buttons, card titles */ --rmk-fs-lg: 1.3125rem; /* 21px: product price, audience title */ --rmk-fs-xl: 1.5rem; /* 24px: section sub-heads, app H1 */ --rmk-fs-2xl: 1.75rem; /* 28px: page H1, stat values */ --rmk-fs-3xl: 2.25rem; /* 36px: CTA band heading */ --rmk-fs-4xl: 2.5rem; /* 40px: section heading, big numbers */ --rmk-fs-hero: 3.625rem; /* 58px: hero heading on wide screens */ --rmk-fw-regular: 400; --rmk-fw-medium: 500; --rmk-fw-semibold: 600; --rmk-fw-bold: 700; --rmk-fw-heavy: 800; --rmk-lh-body: 1.5; --rmk-lh-heading: 1.15; --rmk-lh-hero: 1.05; --rmk-measure: 75ch; /* max line length for reading text */ /* ---- Spacing on a 2px/4px step -------------------------------- */ --rmk-space-half: 2px; --rmk-space-1: 4px; --rmk-space-2: 8px; --rmk-space-3: 12px; --rmk-space-4: 16px; --rmk-space-5: 20px; --rmk-space-6: 24px; --rmk-space-7: 28px; --rmk-space-8: 32px; --rmk-space-9: 36px; --rmk-space-10: 40px; --rmk-space-12: 48px; --rmk-space-14: 56px; --rmk-space-16: 64px; --rmk-space-18: 72px; --rmk-space-22: 88px; /* ---- Radius, border, shadow ----------------------------------- */ --rmk-radius-sm: 4px; --rmk-radius-md: 8px; --rmk-radius-btn: 10px; --rmk-radius-lg: 12px; --rmk-radius-xl: 14px; --rmk-radius-card: 16px; --rmk-radius-2xl: 18px; --rmk-radius-3xl: 20px; --rmk-radius-pill: 999px; --rmk-border-w: 1px; --rmk-shadow-sm: 0 1px 2px rgba(10, 10, 10, .06), 0 1px 3px rgba(10, 10, 10, .08); --rmk-shadow-md: 0 4px 12px rgba(10, 10, 10, .10); --rmk-shadow-hero: 0 30px 80px var(--rmk-brand-glow); --rmk-shadow-phone: 0 30px 60px var(--rmk-shadow-colour); /* ---- Layout --------------------------------------------------- */ --rmk-container: 1200px; --rmk-container-wide: 1280px; --rmk-container-staff: 1360px; --rmk-gutter: 16px; /* side gutter at phone width */ --rmk-gutter-wide: 24px; /* side gutter from tablet up */ --rmk-tap: 48px; /* minimum touch target */ --rmk-tap-sm: 44px; --rmk-tap-lg: 56px; --rmk-sidebar: 248px; }