/* BB Theme sets html { font-size: 10px } (62.5% of 16px) — all rem values
below are authored against that base. 1rem = 10px, 1.6rem = 16px, etc. */
:root {
/* Colors */
--cs-blue: #4085C5;
--cs-blue-dark: #1B5386;
--cs-blue-soft: #93B4DD;
--cs-blue-pale: #D3DCE7;
--cs-blue-pale-40: rgba(211, 220, 231, 0.4);
/* Brand primary. One mid-tone can't fill both roles it's asked for here —
the same trap that produced --cs-blue-card and --cs-blue-body below.
As a BUTTON FILL #5077B3 is fine: white on it is 4.53:1, over the 4.5:1
minimum, so the fill keeps the requested value exactly. As 16px LINK TEXT
on --cs-off-white it is only 4.02:1 and fails, so the text role gets a
sibling one step darker in the same hue (216°): 4.57:1 on the bar and
5.16:1 in the white hamburger drawer. The shift is too small to read as a
different colour but it clears AA.
--cs-primary-strong is the hover for BOTH roles and deliberately darkens
rather than lightens: the hover it replaces (--cs-blue) was 3.46:1 as text
and 3.90:1 as a fill, i.e. already failing in both. It is checked in both
directions — 5.45:1 as text on the bar, 6.14:1 as a fill under a white
label. Any change to these three has to be re-checked the same way. */
--cs-primary: #5077B3;
--cs-primary-text: #4A6EA6;
--cs-primary-strong: #3F6299;
/* Card fill for blue cards that carry small text on top of them. --cs-blue
is a mid-tone, which caps contrast in BOTH directions — on it, dark ink
reaches only 4.18:1 and white only 3.90:1, so nothing clears the 4.5:1
needed at 14–16px. One shade down fixes it without leaving the hue: white
hits 5.60:1. Use this instead of --cs-blue whenever a blue surface has to
carry body-size copy. */
--cs-blue-card: #2F6BA3;
--cs-blue-30: rgba(64, 133, 197, 0.3);
--cs-blue-40: rgba(64, 133, 197, 0.4);
/* Darkened from the original #FC7F56 for WCAG AA. The old value scored only
2.53:1 behind white button labels and 2.24:1 as accent text on #F2F1F0 —
both well under the 4.5:1 minimum. This keeps the brand hue (15°) and most
of its saturation while reaching 5.13:1 with white and 4.54:1 on the page
background, so the same value works for buttons AND accent text. */
--cs-orange: #B44F2D;
--cs-orange-47: rgba(180, 79, 45, 0.47);
/* Body copy on the off-white page background. The band colour #5274B1 was
doing double duty as text and only reached 4.14:1; this is a dedicated
text tone at 4.95:1. Do NOT use it for the blue bands — those stay #5274B1. */
--cs-blue-body: #49689F;
/* Two-tone heading accents sitting ON a blue band.
History: the design's --cs-blue-soft (#93B4DD) failed contrast (1.82–2.18:1
on the bands), and a lighter BLUE that passes is indistinguishable from the
white heading beside it. The first fix went near-black (#0A0D14), which
passed AA but read as off-palette (client, 2026-09-09). Current value
solves it by changing HUE instead of lightness: a light peach from the
palette's warm family — distinct from white by warmth, not luminance.
Measured: 3.83:1 on #2F6BA3 and 3.20:1 on #5274B1 (the two band blues),
1.46:1 + a strong hue shift against the adjacent white.
LARGE-TEXT ONLY (≥3:1) — never reuse this for body-size copy on blue.
Any band-colour change must be re-checked in BOTH directions: contrast
with the band AND visible difference from the adjacent white. */
--cs-accent-on-blue: #F5CDBF;
--cs-ink: #1A202C;
/* Muted body copy. Several modules softened text with `opacity: 0.45` on
--cs-ink, which renders as #919398 — only 2.73:1 on the page background,
well under AA, even though the *declared* colour is a near-black that
looks fine in devtools. Opacity fades text toward whatever is behind it,
so it can't be reasoned about from the colour value alone. This is an
explicit tone instead: visibly softer than full ink, but 5.20:1. */
--cs-ink-soft: #5F6570;
--cs-off-white: #F2F1F0;
--cs-white: #FFFFFF;
--cs-gray-400: #C4C4C4;
--cs-glass-bg: rgba(255, 255, 255, 0.06);
--cs-glass-bg-strong: rgba(255, 255, 255, 0.07);
--cs-glass-border: rgba(255, 255, 255, 0.21);
--cs-glass-blur: 12.6px;
/* Typography */
--cs-font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--cs-font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--cs-text-display: 6.4rem; /* 64px */
--cs-text-h1: 4.8rem; /* 48px */
--cs-text-h2: 2.8rem; /* 28px */
--cs-text-h3: 2.4rem; /* 24px */
--cs-text-eyebrow: 2rem; /* 20px */
--cs-text-button: 2rem; /* 20px */
--cs-text-body: 1.8rem; /* 18px */
--cs-text-card-name: 1.5rem; /* 15px */
--cs-text-fine: 1.2rem; /* 12px */
--cs-line-tight: 1.212;
--cs-line-base: 1.5;
--cs-tracking-tight: -0.02em;
/* Spacing */
--cs-space-xs: 0.8rem; /* 8px */
--cs-space-sm: 1.6rem; /* 16px */
--cs-space-md: 2.4rem; /* 24px */
--cs-space-lg: 4rem; /* 40px */
--cs-space-xl: 6.4rem; /* 64px */
--cs-space-2xl: 9.6rem; /* 96px */
--cs-space-section: 8rem; /* 80px */
--cs-space-section-sm: 5.2rem; /* 52px — mobile; two sections meet at 104px (client 2026-09-15) */
/* Radii */
--cs-radius-sm: 6px;
--cs-radius-md: 37px;
--cs-radius-lg: 49px;
--cs-radius-xl: 73px;
--cs-radius-pill-lg: 28px;
--cs-radius-pill: 100px;
/* Layout */
--cs-container: 1320px;
--cs-container-narrow: 1080px;
--cs-gutter: 2.4rem; /* 24px */
/* Space between the navbar and the top of a page's hero. Applied once, on the
lead row — see the hero-alignment block in base.css. */
--cs-hero-offset: 4rem; /* 40px */
}