/* =============================================================
DSBN GLOBAL DESIGN TOKENS — single source of truth
-------------------------------------------------------------
Portable across board / elementary / secondary themes.
Only the BRAND PALETTE block is meant to be overridden
per-site (via the WordPress Customizer -> inline CSS).
Everything else (type scale, spacing, radii) stays shared.
Type scale source: Spencer Coombes character styles (XD).
Values are the design spec (pt≈px) expressed in rem @16px base;
large display sizes use clamp() so they scale down on mobile
while the MAX equals the exact spec value.
Fonts: Adobe Fonts (Typekit kit ard5rkm)
- Headings : New Spirit -> "new-spirit"
- Body/UI : DM Sans -> "dm-sans"
============================================================= */
:root {
/* --- Font families --------------------------------------- */
--dsbn-font-heading: "new-spirit", Georgia, "Times New Roman", serif;
--dsbn-font-body: "dm-sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
--dsbn-font-ui: "dm-sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
/* --- Type scale (exact XD spec -> rem) -------------------- */
--dsbn-fs-hub: clamp(3rem, 8vw, 6.875rem);
/* HUB title — New Spirit 110
CURRENTLY UNCONSUMED. Kept as the XD spec record only. Its last use was
as the max of .dsbn-hub-hero__heading's ≤768px override, which has been
removed (it inverted the scale-down — see patterns.css). Note the 110px
ceiling never actually rendered even then: that override lived inside a
≤768px media query, where 8vw tops out at ~61px. If you wire this token
up again, verify it renders the size you expect before trusting it. */
--dsbn-fs-banner: clamp(2.25rem, 5vw, 3.75rem);
/* Banner Headings — New Spirit 60 */
--dsbn-fs-section: clamp(2rem, 4vw, 2.5rem);
/* Section Headers — New Spirit 40 (XD spec was 50, then 44, then 36).
The 50px ceiling wrapped real editor h2s to two lines in the 904px
sidebar content column and outweighed the 60px hero title above them;
44px still did on a long one (Proof of Education Letters' "Sending a
Letter to a School or School Board"). 36px fixed that but read too
small against the rest of the page, so this settles between the two.
Note the card-title weight drop that landed alongside the 36px pass
(bold -> semibold, patterns.css) is doing part of this job too — the
section heading no longer has to win on size alone.
Floor/preferred deliberately unchanged across every pass: 4vw reaches
this ceiling at a 1000px viewport, so narrower screens render as they
always have. That matters beyond content headings — this token is also
the mobile step-down for the slideshow title and for
.dsbn-inside-hero__title--xlong, both measured against the 32px floor. */
--dsbn-fs-body-header: clamp(1.5rem, 2.5vw, 1.625rem);
/* Body Headers — DM Sans 30, ceiling nudged down to 26 by request (read
too large for h3/icon-card titles on a 13" MacBook Air's ~1280px
viewport, where 2.5vw already exceeds 30px and saturates at the
ceiling; a first nudge to 28px wasn't a visible enough difference) */
--dsbn-fs-body-header-sm: clamp(1.25rem, 2.1vw, 1.5rem);
/* One step down from --dsbn-fs-body-header — used by the FAQ question
(.dsbn-faq__item summary), which needed to land smaller than a normal
card title so a long question fits on one line instead of wrapping
(see its own comment). Extracted to a token instead of staying a
hand-typed clamp so it can't silently drift the way body-header's
copies did. Values unchanged from the ones verified live. */
--dsbn-fs-banner-sub: 1.75rem;
/* Banner Subheadings — DM Sans 30, nudged slightly smaller by request */
--dsbn-fs-button: 1.25rem;
/* Button & Menus — DM Sans 20 */
--dsbn-fs-eyebrow: 1.25rem;
/* Eyebrow — DM Sans 20 */
--dsbn-fs-body: 1.125rem;
/* Body — DM Sans 18 */
--dsbn-fs-nav: 0.9375rem;
/* Navigation title — DM Sans 15 */
/* --- Type: weights & line-heights ------------------------ */
--dsbn-fw-light: 300;
--dsbn-fw-body: 400;
--dsbn-fw-medium: 500;
--dsbn-fw-semibold: 600;
--dsbn-fw-bold: 700;
--dsbn-lh-tight: 1.1;
--dsbn-lh-heading: 1.2;
--dsbn-lh-body: 1.6;
/* --- BRAND PALETTE (per-site overridable) ---------------- */
--dsbn-color-primary: #004B98;
/* DSBN board blue */
--dsbn-color-secondary: #1E355E;
/* deep navy */
--dsbn-color-accent: #FDC743;
/* yellow */
--dsbn-color-accent-blue: #1A99E5;
/* site blue (CTAs/links) */
--dsbn-color-accent-blue-alt: #29AFFF;
/* lighter alt blue */
--dsbn-color-surface-tint: #e8f1fb;
/* light-blue section wash */
/* --- Neutrals / text ------------------------------------- */
--dsbn-color-ink: #06213E;
/* headings */
--dsbn-color-body: #26364a;
/* body copy */
--dsbn-color-muted: #757575;
/* de-emphasized text (modal notes, entry meta, pagination dots) —
was referenced via var() in three places in style.css but never
actually defined, in either the normal or high-contrast palette */
--dsbn-color-surface: #ffffff;
/* page / card background */
--dsbn-color-surface-alt: #f4f6f9;
/* alt section background */
--dsbn-color-line: #d7dbe1;
/* hairlines / borders */
--dsbn-color-card-border: #C6C6C6;
/* thin card hairline */
--dsbn-color-chevron: #808080;
/* card chevron / arrow affordance circle */
--dsbn-color-footer-bg: #1E355E;
--dsbn-color-footer-text: #ffffff;
--dsbn-color-backdrop: rgba(0, 0, 0, 0.6);
/* modal/dialog scrim overlay */
--dsbn-color-award-bg: #EEF1FF;
--dsbn-color-award-text: #3A3A7C;
--dsbn-color-award-border: #C7CDF5;
/* award chip on gallery artwork cards */
/* --- Pattern accents (cards / eyebrows / soft surfaces) --- */
--dsbn-color-primary-bright: #0056B8;
--dsbn-color-eyebrow: var(--dsbn-color-primary-bright);
/* eyebrow / kicker label text (hub hero, customizable) */
--dsbn-surface-blue-soft: #dcebfb;
/* nav hover / soft blue wash */
--dsbn-surface-cream: #FFF8F2;
/* image-left/right enclosed wash (customizable) */
--dsbn-surface-gray: #F7F7F7;
/* Section tints, sampled from docs/screens/screen-budget-book.png */
--dsbn-surface-lavender: #F2F2FF;
--dsbn-surface-pink: #FFF2F2;
--dsbn-surface-mint: #F2FFFA;
--dsbn-surface-butter: #FFFCF2;
--dsbn-surface-sky: #E1F9FF;
--dsbn-gradient-sky: linear-gradient(180deg, #ffffff 0%, var(--dsbn-surface-sky) 100%);
/* Data tables */
--dsbn-table-head-bg: #F5F5F5;
--dsbn-table-cell-bg: #E0EFFF;
--dsbn-table-cell-total-bg: #C0DEFD;
--dsbn-table-row-gap: 4px;
/* Chart series — fixed order, validated for colour-vision separation */
--dsbn-chart-series-1: #2A78D6;
--dsbn-chart-series-2: #EB6834;
--dsbn-chart-series-3: #1BAF7A;
--dsbn-chart-series-4: #EDA100;
--dsbn-chart-series-5: #E87BA4;
--dsbn-chart-series-6: #008300;
--dsbn-chart-series-7: #4A3AA7;
--dsbn-chart-series-8: #E34948;
--dsbn-chart-bar: var(--dsbn-color-primary-bright);
/* image-left/right gray wash (customizable) */
/* Gradient eyebrow bars (3 Card Row - Outline) */
--dsbn-eyebrow-purple: linear-gradient(135deg, #5B2D83 0%, #C98EED 100%);
--dsbn-eyebrow-pink: linear-gradient(135deg, #8A1F76 0%, #E06ECB 100%);
--dsbn-eyebrow-blue: linear-gradient(135deg, #0C6FA3 0%, #3DC5FF 100%);
--dsbn-eyebrow-orange: linear-gradient(135deg, #FFB477 0%, #FF7300 100%);
--dsbn-eyebrow-dark-pink: linear-gradient(135deg, #E35273 0%, #FF819E 100%);
--dsbn-eyebrow-red: linear-gradient(135deg, #FF3141 0%, #FF6571 100%);
--dsbn-eyebrow-light-purple: linear-gradient(135deg, #AF86D3 0%, #BC98DB 100%);
--dsbn-eyebrow-light-pink: linear-gradient(135deg, #CE87C2 0%, #F59CE5 50%, #D652BF 100%);
--dsbn-eyebrow-yellow: linear-gradient(135deg, #FFB779 0%, #FFAF19 100%);
--dsbn-eyebrow-light-blue: linear-gradient(135deg, #5284E3 0%, #818BFF 100%);
--dsbn-eyebrow-light-green: linear-gradient(135deg, #8CC63F 0%, #B4DA82 100%);
--dsbn-eyebrow-green: linear-gradient(135deg, #39B54A 0%, #7ECF89 100%);
--dsbn-eyebrow-dark-green: linear-gradient(135deg, #0B9444 0%, #60B985 100%);
/* Fill-card gradients (3 Card Row - Fill) */
--dsbn-grad-1: linear-gradient(3deg, #FFB477 0%, #FF7300 100%);
/* orange */
--dsbn-grad-2: linear-gradient(180deg, #E35273 0%, #FF819E 100%);
/* dark pink */
--dsbn-grad-3: linear-gradient(180deg, #FF3141 0%, #FF6571 100%);
/* red */
/* Additional fill-card gradients derived from the outline accent colors
(same color stops as the matching --dsbn-eyebrow-* tokens, 180deg fill
direction like grad-2/grad-3) */
--dsbn-grad-purple: linear-gradient(180deg, #5B2D83 0%, #C98EED 100%);
--dsbn-grad-pink: linear-gradient(180deg, #8A1F76 0%, #E06ECB 100%);
--dsbn-grad-blue: linear-gradient(180deg, #0C6FA3 0%, #3DC5FF 100%);
--dsbn-grad-light-purple: linear-gradient(180deg, #AF86D3 0%, #BC98DB 100%);
--dsbn-grad-light-pink: linear-gradient(180deg, #D652BF 0%, #CE87C2 50%, #F59CE5 100%);
--dsbn-grad-yellow: linear-gradient(180deg, #FFAF19 0%, #FFB779 100%);
--dsbn-grad-light-blue: linear-gradient(180deg, #5284E3 0%, #818BFF 100%);
/* Video card surfaces */
--dsbn-video-half-bg: linear-gradient(135deg, #CBE8FF 0%, #E6F4FF 100%);
--dsbn-video-full-overlay: linear-gradient(184deg, rgba(255, 255, 255, 0) 0%, rgba(93, 98, 137, 0.635) 55%, #000845 100%);
/* Hub hero side nav */
--dsbn-hub-nav-bg: #F5F6F8;
--dsbn-hub-nav-border: #EFEFEF;
--dsbn-hub-nav-active: #EAEBF0;
/* Button colours */
--dsbn-btn-main: #1A99E5;
--dsbn-btn-alt: #29AFFF;
/* SVG icon tokens (mask = currentColor, background = baked colour) */
--dsbn-icon-chevron: url("data:image/svg+xml,");
--dsbn-icon-plus: url("data:image/svg+xml,");
--dsbn-icon-minus: url("data:image/svg+xml,");
--dsbn-icon-arrow-ink: url("data:image/svg+xml,");
--dsbn-icon-arrow-white: url("data:image/svg+xml,");
--dsbn-icon-play-circle-white: url("data:image/svg+xml,");
--dsbn-icon-play: url("data:image/svg+xml,");
--dsbn-icon-phone: url("data:image/svg+xml,");
--dsbn-icon-mail: url("data:image/svg+xml,");
--dsbn-icon-document: url("data:image/svg+xml,");
--dsbn-icon-search: url("data:image/svg+xml,");
--dsbn-icon-location: url("data:image/svg+xml,");
--dsbn-icon-globe: url("data:image/svg+xml,");
/* --- Spacing scale --------------------------------------- */
--dsbn-space-2xs: 0.25rem;
--dsbn-space-xs: 0.5rem;
--dsbn-space-sm: 1rem;
--dsbn-space-md: 1.5rem;
--dsbn-space-lg: 2rem;
--dsbn-space-xl: 3rem;
--dsbn-space-2xl: 4rem;
--dsbn-section-pad: clamp(2rem, 6vw, 6rem);
/* vertical section rhythm */
--dsbn-gutter: clamp(1rem, 4vw, 3rem);
/* horizontal page gutter */
--dsbn-carousel-edge-zone: calc(clamp(1rem, 2.5vw, 2.5rem) + 2.5rem + 0.75rem);
/* homepage carousel/fallback-hero: blank space reserved between the
viewport edge and where the title starts, sized to clear the prev/next
arrow icon (padding + icon width) plus a small margin. Shared by both
the title's left-offset and the arrow icon's own centering padding, so
the arrow is always dead-centered within this same zone by construction. */
--dsbn-carousel-title-max: min(50rem, calc(100% - (2 * var(--dsbn-carousel-edge-zone))));
/* every slide layout's text-block width cap — one value so all layouts match */
/* --- Layout ---------------------------------------------- */
--dsbn-shell: 1595px;
/* shared page/content width */
--dsbn-shell-wide: 1440px;
--dsbn-shell-narrow: 1450px;
/* --- Radii & shadows ------------------------------------- */
--dsbn-radius-sm: 0.5rem;
--dsbn-radius-md: 1rem;
--dsbn-radius-lg: 1.5rem;
--dsbn-radius-pill: 999px;
--dsbn-radius-btn: 28px;
--dsbn-radius-faq: 27px;
--dsbn-radius-nav-link: 9px;
--dsbn-radius-card: 46px;
--dsbn-radius-card-sm: 28px;
/* Card corner radius — was hand-typed 46px identically in 8 places
across the card families; extracted so a future radius change is
one edit instead of eight. */
--dsbn-shadow-card: 0 16px 28px rgba(0, 48, 103, 0.10);
--dsbn-shadow-soft: 0 14px 34px rgba(18, 35, 61, 0.12);
--dsbn-shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.08);
/* Hover-lift shadow shared by every card family's :hover/:focus-within
state — was copy-pasted identically 6 times. */
--dsbn-shadow-card-open: 0 4px 16px rgba(0, 0, 0, 0.06);
/* Shared by FAQ/expandable-icon-card [open] states — was duplicated
twice. */
/* --- Motion ---------------------------------------------- */
--dsbn-ease: cubic-bezier(0.22, 1, 0.36, 1);
--dsbn-transition: 200ms var(--dsbn-ease);
}