/* ========================================================================== Design tokens — rcpbs.com Version: v1.0.0 Created: 31 October 2026 Site: rcpbs-com (Firebase target: rcpbs) Deploy path: /sites/rcpbs-com/public/tokens.css CHANGELOG v1.0.0 2026-10-31 Initial creation. Same token structure as txcertco.com so /shared/css/base.css reads it unchanged; brand values are Resource Consultants. --------------------------------------------------------------------------- PALETTE SOURCE Both brand values are sampled from the Resource Consultants logo files John supplied (flat transparent PNGs, the full lockup and the RC mark), taking the most common fully opaque pixel of each colour: navy #0B2445 the R, the wordmark copper #B76632 the C, the tagline Copper on white is 4.2:1, which passes for large text only. Readable copper on a light surface uses --color-accent-700 (#9A5226), a darker step of the same hue. On the navy surface the lighter --color-accent-300 (#D9925F) is used. --------------------------------------------------------------------------- MEASURED CONTRAST On white (#FFFFFF): --color-text #0B2445 15.5:1 AAA --color-text-muted #4A5568 7.5:1 AAA --color-accent-700 #9A5226 5.8:1 AA On warm grey (#F5EFE9): --color-text #0B2445 13.6:1 AAA --color-accent-700 #9A5226 5.1:1 AA On navy (#0B2445): #D9925F (copper 300) 6.1:1 AA #C9D3E0 (inverse text) 10.3:1 AAA Primary button: white text on navy fill, 15.5:1. ========================================================================== */ :root { /* ====================================================================== 0. FIXED BRAND REFERENCES — sampled from the logo files. Never adjust. ====================================================================== */ --brand-rc-navy: #0B2445; --brand-rc-copper: #B76632; /* ====================================================================== 1. PALETTE ====================================================================== */ /* Brand — navy. 900 is the logo value. */ --color-brand-50: #EEF2F8; --color-brand-100: #DCE4EF; --color-brand-200: #C9D3E0; --color-brand-300: #9DAFC6; --color-brand-400: #6A82A3; --color-brand-500: #3E5A80; --color-brand-600: #284468; --color-brand-700: #1A3457; --color-brand-800: #122B4D; --color-brand-900: #0B2445; --color-brand-950: #061629; /* Accent — copper. 500 is the logo value. */ --color-accent-100: #F6E7DC; --color-accent-200: #EDCBB2; --color-accent-300: #D9925F; --color-accent-400: #C77B45; --color-accent-500: #B76632; --color-accent-600: #A85B2B; --color-accent-700: #9A5226; --color-accent-800: #7A4020; --color-accent-900: #5A2F18; /* Neutral — warm greys that sit beside the copper. */ --color-neutral-0: #FFFFFF; --color-neutral-50: #FAF7F4; --color-neutral-100: #F5EFE9; --color-neutral-200: #E9E3DC; --color-neutral-300: #D8D2CB; --color-neutral-400: #B9B4AE; --color-neutral-500: #9A968F; --color-neutral-600: #6E6B66; --color-neutral-700: #4A5568; --color-neutral-800: #2C3442; --color-neutral-900: #18202C; --color-neutral-950: #0B2445; /* Status */ --color-success-100: #E3F2E8; --color-success-600: #2F7A4D; --color-success-800: #1D4E31; --color-warning-100: #FBF0D6; --color-warning-600: #9A6B00; --color-warning-800: #634500; --color-error-100: #FBE6E4; --color-error-600: #B3261E; --color-error-800: #7A1913; /* ====================================================================== 2. SEMANTIC COLOUR ====================================================================== */ --color-text: var(--color-brand-900); --color-text-strong: var(--color-brand-900); --color-text-muted: var(--color-neutral-700); --color-text-inverse: var(--color-brand-200); --color-text-on-accent: var(--color-neutral-0); --color-surface: var(--color-neutral-0); --color-surface-alt: var(--color-neutral-100); --color-surface-sunken: var(--color-neutral-100); --color-surface-raised: var(--color-neutral-0); --color-surface-inverse: var(--color-brand-900); --color-surface-legal: var(--color-brand-950); --color-surface-accent: var(--color-accent-100); --color-border: var(--color-neutral-200); --color-border-strong: var(--color-neutral-400); --color-border-inverse: var(--color-brand-700); --color-link: var(--color-accent-700); --color-link-hover: var(--color-accent-800); --color-link-visited: var(--color-accent-700); --color-link-inverse: var(--color-accent-300); --color-focus-ring: var(--color-accent-600); --color-selection-bg: var(--color-accent-200); --color-selection-text: var(--color-brand-900); --color-overlay: rgb(11 36 69 / 0.62); --color-scrim: rgb(0 0 0 / 0.35); /* ====================================================================== 3. TYPEFACES — declared in /shared/css/fonts.css. The logo is a wide geometric sans, so headings stay in the sans family rather than a serif. ====================================================================== */ --font-heading: 'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace; /* ====================================================================== 4. TYPE SCALE — shared, identical to the template ====================================================================== */ --step--2: clamp(0.750rem, 0.7125rem + 0.125vw, 0.8125rem); --step--1: clamp(0.875rem, 0.8375rem + 0.125vw, 0.9375rem); --step-0: clamp(1.000rem, 0.9250rem + 0.250vw, 1.1250rem); --step-1: clamp(1.125rem, 0.9750rem + 0.500vw, 1.3750rem); --step-2: clamp(1.375rem, 1.1500rem + 0.750vw, 1.7500rem); --step-3: clamp(1.625rem, 1.3250rem + 1.000vw, 2.1250rem); --step-4: clamp(2.000rem, 1.4000rem + 2.000vw, 3.0000rem); --step-5: clamp(2.500rem, 1.7500rem + 2.500vw, 3.7500rem); --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-heading: 800; --leading-none: 1; --leading-tight: 1.12; --leading-snug: 1.3; --leading-normal: 1.6; --leading-loose: 1.8; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-eyebrow: 0.18em; --measure: 68ch; --measure-narrow: 48ch; /* ====================================================================== 5. SPACING — shared ====================================================================== */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 8rem; --space-section: clamp(2.5rem, 1.3rem + 4vw, 5rem); --space-section-tight: clamp(1.5rem, 0.9rem + 2vw, 2.5rem); --space-section-loose: clamp(4rem, 2.2rem + 6vw, 7.5rem); /* ====================================================================== 6. LAYOUT — shared ====================================================================== */ --width-container: 1120px; --width-container-wide: 1280px; --width-container-narrow: 760px; --space-gutter: clamp(1rem, 0.4rem + 3vw, 2.5rem); --grid-columns: 12; --grid-gap: clamp(1rem, 0.7rem + 1.5vw, 1.5rem); --grid-gap-row: var(--space-lg); --tap-target-min: 44px; /* ====================================================================== 7. BORDERS, RADII, SHADOWS — small radius; technical, not soft. ====================================================================== */ --border-width-hairline: 1px; --border-width-rule: 2px; --border-width-heavy: 4px; --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 9999px; --shadow-sm: 0 1px 2px rgb(11 36 69 / 0.06), 0 1px 3px rgb(11 36 69 / 0.08); --shadow-md: 0 2px 4px rgb(11 36 69 / 0.05), 0 4px 12px rgb(11 36 69 / 0.10); --shadow-lg: 0 4px 8px rgb(11 36 69 / 0.05), 0 12px 32px rgb(11 36 69 / 0.14); /* ====================================================================== 8. MOTION — shared ====================================================================== */ --duration-instant: 0ms; --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ====================================================================== 9. LAYERING — shared ====================================================================== */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-drawer-overlay: 290; --z-drawer: 300; --z-modal: 400; --z-toast: 500; --z-skip-link: 600; /* ====================================================================== 10. FOCUS — shared ====================================================================== */ --focus-ring-width: 3px; --focus-ring-offset: 2px; --focus-ring-style: solid; /* ====================================================================== 11. COMPONENT TOKENS ====================================================================== */ /* --- Button -------------------------------------------------------- */ --btn-font: var(--font-body); --btn-font-size: var(--step--1); --btn-font-weight: var(--weight-bold); --btn-tracking: var(--tracking-wide); --btn-padding-block: 0.875rem; --btn-padding-inline: 1.75rem; --btn-radius: var(--radius-sm); --btn-border-width: 1px; --btn-min-width: 220px; --btn-min-height: var(--tap-target-min); --btn-primary-bg: var(--color-brand-900); --btn-primary-bg-hover: var(--color-brand-700); --btn-primary-text: var(--color-neutral-0); --btn-primary-border: transparent; --btn-secondary-bg: transparent; --btn-secondary-bg-hover: var(--color-brand-900); --btn-secondary-text: var(--color-brand-900); --btn-secondary-text-hover: var(--color-neutral-0); --btn-secondary-border: var(--color-brand-900); --btn-ghost-bg: transparent; --btn-ghost-bg-hover: var(--color-accent-100); --btn-ghost-text: var(--color-accent-700); --btn-ghost-border: var(--color-neutral-300); /* --- Header -------------------------------------------------------- */ --header-bg: var(--color-neutral-0); --header-text: var(--color-brand-900); --header-border: var(--color-border); --header-padding-block: var(--space-xs); --header-logo-height: clamp(2.5rem, 2.1rem + 1.4vw, 3.25rem); /* --- Navigation ---------------------------------------------------- */ --nav-font: var(--font-body); --nav-font-size: var(--step--1); --nav-font-weight: var(--weight-bold); --nav-tracking: var(--tracking-wide); --nav-item-gap: var(--space-md); --nav-text: var(--color-brand-900); --nav-text-hover: var(--color-accent-700); /* --- Footer ------------------------------------------------------ Light, so the navy-and-copper logo reads on it. */ --footer-bg: var(--color-neutral-100); --footer-text: var(--color-neutral-700); --footer-heading: var(--color-brand-900); --footer-link: var(--color-brand-900); --footer-link-hover: var(--color-accent-700); --footer-border: var(--color-neutral-300); --footer-padding-block: var(--space-2xl); --footer-font-size: var(--step--1); /* --- Form fields --------------------------------------------------- */ --field-bg: var(--color-neutral-0); --field-text: var(--color-text); --field-placeholder: var(--color-neutral-600); --field-border: var(--color-border-strong); --field-border-hover: var(--color-neutral-600); --field-border-focus: var(--color-brand-900); --field-border-error: var(--color-error-600); --field-radius: var(--radius-sm); --field-padding-block: 0.75rem; --field-padding-inline: 0.875rem; --field-min-height: var(--tap-target-min); --field-font-size: var(--step-0); --field-label-size: var(--step--1); --field-label-weight: var(--weight-semibold); --field-help-size: var(--step--1); --field-help-text: var(--color-text-muted); --field-error-text: var(--color-error-800); --field-required-mark: var(--color-accent-700); /* --- Card ---------------------------------------------------------- */ --card-bg: var(--color-surface); --card-border: var(--color-border); --card-radius: var(--radius-md); --card-padding: var(--space-md); --card-shadow: var(--shadow-sm); /* --- Divider ------------------------------------------------------- */ --divider-color: var(--color-border); --divider-width: var(--border-width-hairline); --divider-margin: var(--space-lg); /* --- Media --------------------------------------------------------- */ --media-radius: var(--radius-md); --media-placeholder: var(--color-neutral-300); --video-aspect: 16 / 9; } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } }