/* ============================================================ CAAT Design System — Design Tokens ------------------------------------------------------------ Organized in tiers (see docs/design-system-recommendations.md §A): TIER 1 — PRIMITIVES Raw values. Namespaced --caat-*. The only place literal colours / sizes are declared. TIER 2 — SEMANTIC Intent-based aliases (--caat-color-text-*, --caat-font-*, etc.). Components SHOULD consume these, not primitives, so global changes and rebrands happen in one place. TIER 3 — BOOTSTRAP Maps our semantic tokens onto Bootstrap's vars. Theme: light only (no dark scaffold by decision). The semantic tier is still used so a future theme or rebrand only re-points Tier 2. ============================================================ */ :root { /* ══════════════════════════════════════════════════════════ TIER 1 — PRIMITIVES ══════════════════════════════════════════════════════════ */ /* ── Colour ──────────────────────────────────────────────── */ --caat-blue: #0f6791; --caat-blue-950: #00283a; /* pressed / active (darker than 900) */ --caat-blue-900: #003750; --caat-blue-700: #0b5a80; --caat-blue-500: #2f95d2; --caat-blue-300: #9dd2ed; --caat-blue-100: #e7f4fb; --caat-blue-50: rgba(0,92,153,.05); --caat-green: #55a546; --caat-green-900: #204b1f; --caat-green-700: #367f32; --caat-green-100: #e8f5e6; --caat-lime: #95e35c; --caat-teal: #12a7b8; --caat-teal-dark: #0f8f9d; --caat-grey: #eff2f7; --caat-grey-200: #dfe6ef; --caat-grey-300: #cbd7e3; --caat-grey-100: #e8ecf1; --caat-grey-500: #6f7d8c; /* AA: meets 3:1 on white (4.2:1) — interactive borders */ --caat-ink: #102637; --caat-muted: #506273; --caat-white: #fff; --caat-warning: #efaa39; --caat-warning-accent: #d4a017; /* vivid accent (icons/bars) — NOT a darker shade of --caat-warning */ --caat-danger: #b83232; --caat-danger-accent: #c0392b; /* vivid accent (icons/text) — NOT a darker shade of --caat-danger */ --caat-success: #2f7d32; --caat-info: #0dcaf0; --caat-beige: #f8f5ee; /* Status / semantic backgrounds (alerts, badges) */ --caat-success-bg: #d1e7dd; --caat-success-text: #0a3622; --caat-warning-bg: #fff3cd; --caat-warning-text: #664d03; --caat-danger-text: #58151c; --caat-danger-bg: #fde8e8; /* Alert-specific backgrounds & borders */ --caat-alert-info-bg: #cfe2ff; --caat-alert-info-border: #9ec5fe; --caat-alert-success-bg: #d1e7dd; --caat-alert-success-border: #a3cfbb; --caat-alert-warning-bg: #fff3cd; --caat-alert-warning-border: #ffe69c; --caat-alert-danger-bg: #f8d7da; --caat-alert-danger-border: #f1aeb5; /* Neutral */ --caat-disabled: #8a99a8; /* Soft teal (badge soft variant) */ --caat-teal-100: #e4f7f8; --caat-teal-900: #0a7a86; /* White alpha steps — text/dividers on dark imagery & brand panels */ --caat-white-88: rgba(255,255,255,.88); --caat-white-70: rgba(255,255,255,.7); --caat-white-30: rgba(255,255,255,.3); /* Navy scrim steps — image overlay gradients (composed in Tier 2) */ --caat-scrim-strong: rgba(0,55,80,.88); --caat-scrim-mid: rgba(0,55,80,.55); --caat-scrim-soft: rgba(0,55,80,.32); --caat-scrim-faint: rgba(0,55,80,.05); /* Translucent hero-panel surface (brand glass over imagery) */ --caat-blue-glass: rgba(0,94,128,.94); --caat-blue-glass-hover: rgba(0,82,112,.98); /* ── Typography primitives ───────────────────────────────── */ --caat-font-primary: "Libre Franklin", Arial, Helvetica, sans-serif; --caat-font-secondary: Arial, Helvetica, sans-serif; --caat-font-mono: Arial, Helvetica, sans-serif; /* Font-size scale (rem). Paired line-heights below. Values formalize the EXISTING .caat-title scale (display 3.5 / h1 2.5 / h2 2 / h3 1.75 / h4 1.5 / h5 1.25 / h6 1) plus lead/body/small. Ad-hoc sizes scattered in components (.72/.78/.82/.84/.92rem) should migrate to the nearest step. */ --caat-font-size-2xs: .75rem; /* 12px — eyebrow, caption, badge */ --caat-font-size-xs: .875rem; /* 14px — small / meta */ --caat-font-size-sm: .9375rem; /* 15px — secondary UI labels */ --caat-font-size-md: 1rem; /* 16px — body (base) · h6 */ --caat-font-size-lg: 1.25rem; /* 20px — lead · h5 */ --caat-font-size-xl: 1.5rem; /* 24px — h4 */ --caat-font-size-2xl: 1.75rem; /* 28px — h3 */ --caat-font-size-3xl: 2rem; /* 32px — h2 */ --caat-font-size-4xl: 2.5rem; /* 40px — h1 */ --caat-font-size-5xl: 3.5rem; /* 56px — display */ /* Line-heights (unitless) — match the documented scale */ --caat-leading-tight: 1.1; /* display */ --caat-leading-heading: 1.2; /* standard headings */ --caat-leading-snug: 1.4; /* short UI text */ --caat-leading-normal: 1.6; /* body copy */ /* Font weights — system already uses 400/600/700/800/900 informally */ --caat-weight-regular: 400; --caat-weight-semibold: 600; --caat-weight-bold: 700; --caat-weight-extrabold: 800; --caat-weight-black: 900; /* Letter-spacing */ --caat-letter-spacing-normal: 0; --caat-letter-spacing-tight: -.015em; --caat-letter-spacing-label: .06em; --caat-letter-spacing-wide: .08em; /* eyebrows / overlines */ /* ── Spacing scale (4px base) ────────────────────────────── */ --caat-space-1: .25rem; /* 4px */ --caat-space-2: .5rem; /* 8px */ --caat-space-3: .75rem; /* 12px */ --caat-space-4: 1rem; /* 16px */ --caat-space-5: 1.5rem; /* 24px */ --caat-space-6: 2rem; /* 32px */ --caat-space-7: 3rem; /* 48px */ --caat-space-8: 4rem; /* 64px */ --caat-space-9: 6rem; /* 96px */ /* ── Radius scale ────────────────────────────────────────── */ --caat-radius-sm: .375rem; --caat-radius: .75rem; /* default (kept) */ --caat-radius-lg: 1.25rem; /* (kept) */ --caat-radius-hero: 4.5rem; /* hero panel signature corner (bottom-right) */ --caat-radius-pill: 999px; /* ── Border widths ───────────────────────────────────────── */ --caat-border-1: 1px; --caat-border-2: 2px; --caat-border-4: 4px; /* ── Elevation / shadow scale ────────────────────────────── */ --caat-shadow-sm: 0 .25rem .75rem rgba(0,55,80,.08); /* raised card (kept) */ --caat-shadow: 0 .75rem 1.75rem rgba(0,55,80,.10); /* default (kept) */ --caat-shadow-md: 0 1rem 2.5rem rgba(0,55,80,.14); /* dropdown / popover */ --caat-shadow-lg: 0 1.5rem 3.5rem rgba(0,55,80,.20); /* modal / dialog */ --caat-shadow-hover: 0 1.25rem 3rem rgba(0,55,80,.24); /* lifted hero panel */ /* Focus ring: SOLID blue-500 — meets WCAG 1.4.11 (3:1) on BOTH light (3.31:1) and dark navy (~4.5:1) surfaces. Was rgba(...,.35), which failed at 1.47:1. */ --caat-focus: 0 0 0 .1875rem var(--caat-blue-500); /* Inset variant: for items inside overflow-clipped rounded containers (dropdown items, list-group rows) where an outer ring would be cut off. */ --caat-focus-inset: inset 0 0 0 .1875rem var(--caat-blue-500); /* ── Z-index scale (coexists with Bootstrap's 1000–1090) ─── */ --caat-z-base: 0; --caat-z-sticky: 1020; /* sticky header (= Bootstrap) */ --caat-z-drawer: 1045; /* doc-site / off-canvas drawer */ --caat-z-backdrop: 1050; /* overlay backdrop */ --caat-z-modal: 1055; /* dialog */ --caat-z-popover: 1070; /* popover / tooltip */ --caat-z-toast: 1090; /* toast / snackbar */ --caat-z-skiplink: 1100; /* skip link — always on top */ /* ── Motion ──────────────────────────────────────────────── */ --caat-duration-fast: 120ms; --caat-duration-base: 200ms; --caat-duration-slow: 320ms; --caat-ease-standard: cubic-bezier(.2, 0, 0, 1); /* most transitions */ --caat-ease-emphasized: cubic-bezier(.3, 0, 0, 1); /* enter/expand */ --caat-ease-exit: cubic-bezier(.4, 0, 1, 1); /* leave/collapse */ /* ── Hover lift distances (interaction standard) ───────────── One tier per component scale — see Interaction States. */ --caat-lift-subtle: -1px; /* buttons, small controls */ --caat-lift-row: -2px; /* list rows, logo tiles */ --caat-lift-card: -3px; /* cards in grids */ --caat-lift-panel: -4px; /* hero panels, large previews */ /* ── Opacity ─────────────────────────────────────────────── */ --caat-opacity-disabled: .5; --caat-opacity-muted: .7; --caat-opacity-backdrop: .25; /* ── Breakpoints (REFERENCE ONLY) ──────────────────────────── CSS custom properties cannot be used inside @media queries, so these are documentation of the values we design to. They match Bootstrap 5 — keep using Bootstrap's grid/utility breakpoints: sm 576px · md 768px · lg 992px · xl 1200px · xxl 1400px DESIGN TIERS (see foundations/responsive.html — the standard): MOBILE < 768px (xs + sm) TABLET 768 – 991.98px (md) DESKTOP ≥ 992px (lg; xl/xxl only widen the container) AUTHORING CONVENTION — component CSS may use ONLY these queries: @media (max-width: 575.98px) narrow-mobile refinements @media (max-width: 767.98px) below tablet (mobile) @media (max-width: 991.98px) below desktop (mobile + tablet) @media (min-width: 992px) desktop-only enhancements @media (min-width: 768px) and (max-width: 991.98px) tablet-only Always the .98px form on max-width (Bootstrap convention) so a min-width rule at the same cut can never double-fire. Prefer intrinsic responsiveness (auto-fit grids, flex-wrap, clamp()) before reaching for a media query. ──────────────────────────────────────────────────────────── */ /* ══════════════════════════════════════════════════════════ TIER 2 — SEMANTIC (intent) Components should reference THESE. Change a brand decision here and it propagates everywhere. (Light theme only.) ══════════════════════════════════════════════════════════ */ /* ── Text ────────────────────────────────────────────────── */ --caat-color-text: var(--caat-ink); --caat-color-text-heading: var(--caat-blue-900); /* headings / titles */ --caat-color-text-muted: var(--caat-muted); --caat-color-text-inverse: var(--caat-white); --caat-color-text-inverse-muted: var(--caat-white-88); /* body copy on dark/brand */ --caat-color-text-inverse-dim: var(--caat-white-70); /* meta / secondary on dark */ --caat-color-text-link: var(--caat-blue-900); --caat-color-text-link-hover:var(--caat-blue-700); --caat-color-text-on-brand: var(--caat-white); --caat-color-text-disabled: var(--caat-disabled); /* ── Surfaces / backgrounds ──────────────────────────────── */ --caat-color-bg-page: var(--caat-white); --caat-color-bg-subtle: var(--caat-grey); /* tinted section */ --caat-color-bg-muted: var(--caat-grey-100); --caat-color-bg-brand: var(--caat-blue-900); /* dark brand band */ --caat-color-bg-brand-subtle: var(--caat-blue-100); /* light brand tint */ --caat-color-bg-overlay: rgba(0,0,0,.25); /* modal/drawer scrim */ --caat-color-bg-hero-panel: var(--caat-blue-glass); /* hero overlay panel */ --caat-color-bg-hero-panel-hover: var(--caat-blue-glass-hover); /* ── Image overlays (scrims composed from Tier 1 steps) ───── */ --caat-overlay-side: linear-gradient(90deg, var(--caat-scrim-soft), var(--caat-scrim-faint) 55%); /* hero media: text-side legibility */ --caat-overlay-bottom: linear-gradient(to top, var(--caat-scrim-strong) 0%, var(--caat-scrim-mid) 40%, transparent 70%); /* overlay cards: bottom legibility */ /* ── Borders / dividers ──────────────────────────────────── */ --caat-color-border: var(--caat-grey-200); /* decorative dividers (1.4.11 exempt) */ --caat-color-border-strong: var(--caat-grey-300); --caat-color-border-interactive: var(--caat-grey-500); /* form-control borders — meets 3:1 */ --caat-color-border-inverse: var(--caat-white-30); /* dividers on dark/brand surfaces */ /* ── Actions ────────────────────────────────────────────────── Each action role has resting / hover / active (pressed) shades so the state matrix is fully token-driven and active is distinct. */ --caat-color-action-primary: var(--caat-blue-900); --caat-color-action-primary-hover: var(--caat-blue-700); --caat-color-action-primary-active: var(--caat-blue-950); /* AA: white text needs green-700 (4.95:1); plain --caat-green is 3.06:1 (fail). */ --caat-color-action-secondary: var(--caat-green-700); --caat-color-action-secondary-hover: var(--caat-green-900); --caat-color-action-secondary-active:var(--caat-green-900); /* ── Focus ───────────────────────────────────────────────── */ --caat-color-focus-ring: var(--caat-focus); --caat-color-focus-ring-inset: var(--caat-focus-inset); --caat-color-focus-edge: var(--caat-blue-500); /* ── Interaction states ────────────────────────────────────── Token-driven appearance for the standard state matrix. See the Interaction States foundation page. */ --caat-color-state-hover-bg: var(--caat-blue-100); /* subtle row / nav / list hover */ --caat-color-state-selected-bg: var(--caat-blue-900); /* current / selected (strong) */ --caat-color-state-selected-text: var(--caat-color-text-inverse); --caat-color-state-selected-subtle: var(--caat-blue-100); /* selected (subtle / chips) */ --caat-color-state-disabled-bg: var(--caat-grey-200); /* disabled control surface */ --caat-color-state-invalid: var(--caat-danger); /* invalid border / icon (AA on white) */ /* ── Feedback (info / success / warning / danger) ────────── */ --caat-color-feedback-info-bg: var(--caat-alert-info-bg); --caat-color-feedback-info-border: var(--caat-alert-info-border); --caat-color-feedback-info-text: var(--caat-blue-900); --caat-color-feedback-success-bg: var(--caat-success-bg); --caat-color-feedback-success-border: var(--caat-alert-success-border); --caat-color-feedback-success-text: var(--caat-success-text); --caat-color-feedback-warning-bg: var(--caat-warning-bg); --caat-color-feedback-warning-border: var(--caat-alert-warning-border); --caat-color-feedback-warning-text: var(--caat-warning-text); --caat-color-feedback-danger-bg: var(--caat-danger-bg); --caat-color-feedback-danger-border: var(--caat-alert-danger-border); --caat-color-feedback-danger-text: var(--caat-danger-text); /* ── Typographic roles ───────────────────────────────────── */ --caat-font-body: var(--caat-font-primary); --caat-font-heading: var(--caat-font-primary); /* Body */ --caat-text-body-size: var(--caat-font-size-md); --caat-text-body-leading:var(--caat-leading-normal); --caat-text-lead-size: var(--caat-font-size-lg); /* ── Long-form prose rhythm ─────────────────────────────────── Typographic vertical rhythm for running prose (.caat-rich-text). Principle: space belongs to what FOLLOWS — a heading gets a large gap BEFORE it (new section) and a small gap AFTER (it attaches to its first paragraph). So: heading-before > paragraph-flow > heading-after. This is type-relative spacing, separate from the 4px UI spacing scale. */ --caat-prose-leading: 1.7; --caat-prose-flow: 1.25rem; /* between paragraphs / lists */ --caat-prose-measure: 68ch; /* max line length for readability */ --caat-prose-h2-space-before: 2.5rem; --caat-prose-h3-space-before: 2rem; --caat-prose-h4-space-before: 1.5rem; --caat-prose-heading-space-after:0.5rem; /* Headings (size / leading / weight as a set) — map to .caat-title scale */ --caat-text-display-size: var(--caat-font-size-5xl); /* weight 900 */ --caat-text-h1-size: var(--caat-font-size-4xl); --caat-text-h2-size: var(--caat-font-size-3xl); --caat-text-h3-size: var(--caat-font-size-2xl); --caat-text-h4-size: var(--caat-font-size-xl); --caat-text-h5-size: var(--caat-font-size-lg); --caat-text-h6-size: var(--caat-font-size-md); --caat-text-heading-leading: var(--caat-leading-heading); --caat-text-heading-weight: var(--caat-weight-extrabold); --caat-text-heading-tracking: var(--caat-letter-spacing-tight); /* Eyebrow / overline label role — SINGLE SOURCE for the eyebrow pattern. Canonical spec (matches the documented Type-Scale row + both product components): .75rem / 700 / .08em / uppercase. */ --caat-text-eyebrow-size: var(--caat-font-size-2xs); --caat-text-eyebrow-weight: var(--caat-weight-bold); /* 700 */ --caat-text-eyebrow-tracking:var(--caat-letter-spacing-wide); /* .08em */ --caat-color-eyebrow: var(--caat-blue-700); /* on light bg */ --caat-color-eyebrow-on-dark:var(--caat-blue-300); /* neutral default on dark/image bg */ --caat-color-eyebrow-on-dark-hero: var(--caat-lime); /* deliberate CAAT brand accent — hero eyebrows only */ /* ══════════════════════════════════════════════════════════ TIER 3 — BOOTSTRAP OVERRIDES (consume semantic tokens) ══════════════════════════════════════════════════════════ */ --bs-body-font-family: var(--caat-font-body); --bs-body-color: var(--caat-color-text); --bs-primary: var(--caat-color-action-primary); --bs-primary-rgb: 0,55,80; --bs-secondary: var(--caat-color-action-secondary); --bs-secondary-rgb: 85,165,70; --bs-link-color: var(--caat-color-text-link); --bs-link-hover-color: var(--caat-color-text-link-hover); /* Bootstrap border/rounded utilities follow the system scales */ --bs-border-color: var(--caat-color-border); --bs-border-radius: var(--caat-radius-sm); /* rounded */ --bs-border-radius-sm: var(--caat-radius-sm); /* rounded-1/2 */ --bs-border-radius-lg: var(--caat-radius); /* rounded-3 */ --bs-border-radius-xl: var(--caat-radius-lg); /* rounded-4 */ }