/* ════════════════════════════════════════════════════════════════════════════ CCWP DESIGN TOKENS — the single source of truth (SPEC §3.2). Consumed by EVERYTHING: public site, elections subdomain, plats, jobs, Document Center, and the admin SPA. This file is the ONLY place a raw color value may appear — site.css, admin.css and every block renderer use var() exclusively (guarded by tools/contrast-check.mjs). Contrast annotations: every text/background pairing used by the system is annotated with its WCAG 2.1 contrast ratio. AA requires ≥ 4.5:1 for normal text, ≥ 3:1 for large text (≥ 24px / 19px bold) and UI components. BREAKPOINTS (SPEC §3.2 — exactly four; no other widths anywhere): @custom-media --bp-sm (min-width: 480px); ≥ 480px — large phones @custom-media --bp-md (min-width: 768px); ≥ 768px — tablets @custom-media --bp-lg (min-width: 1024px); ≥ 1024px — desktop / full nav @custom-media --bp-xl (min-width: 1280px); ≥ 1280px — wide desktop (@custom-media is not yet native — the values above are documentation; media queries in site.css hard-code exactly these four widths and no others.) ════════════════════════════════════════════════════════════════════════════ */ :root { /* ── 1. Brand palette (from the live site, WCAG-tuned variants kept) ────── */ --cc-navy: #1a3a5c; /* primary navy — on white 11.6:1 (AA/AAA ✓) */ --cc-navy-dark: #102540; /* deep navy — on white 15.4:1 (AAA ✓) */ --cc-navy-mid: #24527f; /* link/nav navy — on white 8.1:1 (AAA ✓) */ --cc-navy-light: #e8f0f8; /* tint fill — navy text on it 10.1:1 ✓ */ --cc-navy-xlight: #f0f5fb; /* section tint — body text on it 13.9:1 ✓ */ --cc-gold: #c8951a; /* brand gold — NON-TEXT accents only on white (2.7:1); as text ONLY on navy-dark 5.7:1 ✓ */ --cc-gold-text: #7a5c00; /* gold for text on white/tints — 6.3:1 (AA ✓) */ --cc-gold-bright: #e8a820; /* gold for text/UI on navy surfaces: on navy-dark 7.3:1 ✓ · on navy 5.6:1 ✓ on navy-mid 4.0:1 (large text/UI only ✓) */ --cc-gold-light: #f5e6c4; /* pale gold — text on navy-dark 12.4:1 ✓, on navy 9.4:1 ✓; as a fill, pair with --cc-text (13.1:1 ✓) or --cc-gold-text 5.3:1 */ --cc-red: #b91c1c; /* alerts ONLY — on white 6.5:1 (AA ✓); white text on red fill 6.5:1 ✓ */ --cc-red-dark: #7f1d1d; /* urgent-alert fill — white on it 10.4:1 ✓ */ --cc-red-light: #fef2f2; /* alert tint — --cc-red text on it 6.0:1 ✓ */ --cc-green: #166534; /* success — on white 7.4:1 (AA ✓) */ --cc-green-light: #f0fdf4; /* success tint — green text on it 6.9:1 ✓ */ /* ── 2. Grays (cool, navy-cast) ─────────────────────────────────────────── */ --cc-white: #ffffff; --cc-gray-50: #f7f9fb; /* card/section wash — body text on it 14.4:1 ✓ */ --cc-gray-100: #f0f2f5; /* legacy band gray — body text on it 13.6:1 ✓ */ --cc-gray-200: #e2e6ec; /* hairlines on white 1.3:1 (decorative) */ --cc-gray-300: #d0d6de; /* card borders (decorative, 1.5:1) */ --cc-gray-400: #9aa5b1; /* disabled/ghost UI on white 2.6:1 — never for meaningful text */ --cc-gray-500: #6b7684; /* icons/borders-with-meaning on white 4.6:1 ✓ */ --cc-gray-600: #505a68; /* muted text on white 7.0:1 (AA ✓) */ --cc-gray-700: #3a4350; /* strong muted on white 10.0:1 ✓ */ --cc-gray-900: #1e2530; /* body text on white 15.4:1 (AAA ✓) */ /* ── 3. Semantic aliases (what components actually reference) ───────────── */ --color-text: var(--cc-gray-900); /* on --color-surface 15.4:1 ✓ */ --color-text-muted: var(--cc-gray-600); /* on --color-surface 7.0:1 ✓ */ --color-text-invert: var(--cc-white); /* on navy 11.6:1 / navy-dark 15.4:1 / navy-mid 8.1:1 ✓ */ --color-link: var(--cc-navy-mid); /* on white 8.1:1 ✓ */ --cc-link-hover: var(--cc-navy); /* on white 11.6:1 ✓ */ --color-link-hover: var(--cc-link-hover); --color-link-invert: var(--cc-gold-bright); /* links on navy surfaces */ --color-surface: var(--cc-white); --color-surface-tint: var(--cc-gray-50); --color-surface-brand: var(--cc-navy-light); --color-surface-dark: var(--cc-navy-dark); /* .band-navy moments */ --color-border: var(--cc-gray-300); --color-border-strong: var(--cc-gray-500); --color-heading: var(--cc-navy); /* on white 11.6:1 ✓ */ --color-accent: var(--cc-gold); /* non-text accents */ --color-danger: var(--cc-red); --color-success: var(--cc-green); /* Alert severity styles (SPEC §4 alerts — locked here so severity contrast is enforced by construction; each = fill / text / icon-accent): info: navy-light fill, navy text 10.1:1 ✓ warning: gold-light fill, --cc-text text 13.1:1 ✓ (gold-text 5.3:1) urgent: red fill, white text 6.5:1 ✓ success: green-light fill, green text 6.9:1 ✓ closure: navy-dark fill, white text 15.4:1 ✓ (gold-bright 7.3:1) */ --alert-info-bg: var(--cc-navy-light); --alert-info-fg: var(--cc-navy); --alert-warning-bg: var(--cc-gold-light); --alert-warning-fg: var(--cc-gray-900); --alert-warning-accent: var(--cc-gold-text); --alert-urgent-bg: var(--cc-red); --alert-urgent-fg: var(--cc-white); --alert-success-bg: var(--cc-green-light); --alert-success-fg: var(--cc-green); --alert-closure-bg: var(--cc-navy-dark); --alert-closure-fg: var(--cc-white); --alert-closure-accent: var(--cc-gold-bright); /* ── 4. Alpha / overlay tokens (so no raw rgba leaks into site.css) ─────── */ --scrim-navy: rgba(16, 37, 64, 0.82); /* photo overlays — white text over courthouse ≥ 12:1 ✓ */ --scrim-navy-soft: rgba(16, 37, 64, 0.55); --scrim-navy-grad: linear-gradient(180deg, rgba(16,37,64,.68) 0%, rgba(16,37,64,.86) 100%); --scrim-hero-grad: linear-gradient(115deg, rgba(16,37,64,.92) 0%, rgba(26,58,92,.78) 55%, rgba(36,82,127,.55) 100%); --white-alpha-10: rgba(255, 255, 255, 0.10); --white-alpha-18: rgba(255, 255, 255, 0.18); --white-alpha-35: rgba(255, 255, 255, 0.35); --white-alpha-70: rgba(255, 255, 255, 0.70); --navy-alpha-08: rgba(26, 58, 92, 0.08); --navy-alpha-15: rgba(26, 58, 92, 0.15); --gold-alpha-25: rgba(200, 149, 26, 0.25); --shadow-color: rgba(16, 37, 64, 0.10); --shadow-color-deep: rgba(16, 37, 64, 0.20); /* Header/footer gradients (brand moments) */ --grad-header: linear-gradient(135deg, #102540 0%, #1e4470 100%); --grad-footer: linear-gradient(180deg, #0d1f35 0%, #102540 100%); --grad-navy-btn: linear-gradient(180deg, #24527f 0%, #1a3a5c 100%); --grad-gold-btn: linear-gradient(180deg, #e8a820 0%, #c8951a 100%); /* gold button carries NAVY-DARK text: on gold-bright 5.4:1 ✓, gold 4.7:1 ✓ */ /* ── 5. Typography ──────────────────────────────────────────────────────── */ --font-ui: 'Inter', 'Segoe UI', system-ui, Arial, sans-serif; --font-display: 'Merriweather', Georgia, 'Times New Roman', serif; /* Fluid modular scale (ratio 1.125 at the small end, stretching for display). Body/UI text NEVER goes below 1rem (SPEC §3.2). */ --fs-meta: 0.9375rem; /* 15px — uppercase kickers, badges, fine meta ONLY */ --fs-0: 1rem; /* 16px — body floor */ --fs-1: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem); /* lede/body-lg */ --fs-2: clamp(1.1875rem, 1.1rem + 0.4vw, 1.3125rem); /* h4 / big UI */ --fs-3: clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem); /* h3 */ --fs-4: clamp(1.625rem, 1.4rem + 1vw, 2.125rem); /* h2 / section title */ --fs-5: clamp(2rem, 1.6rem + 1.8vw, 2.75rem); /* page-banner h1 */ --fs-6: clamp(2.375rem, 1.9rem + 2.6vw, 3.5rem); /* homepage hero h1 */ --lh-body: 1.65; --lh-tight: 1.25; --lh-display: 1.12; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800; /* Inter — stat numbers, chips */ --fw-black: 900; /* Merriweather display only */ /* ── 6. Spacing scale (4px base) ────────────────────────────────────────── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 2.5rem; /* 40px */ --space-8: 3rem; /* 48px */ --space-10: 4rem; /* 64px */ --space-12: 5rem; /* 80px */ --space-16: 7rem; /* 112px */ --section-pad: clamp(var(--space-8), 6vw, var(--space-12)); /* ── 7. Layout ──────────────────────────────────────────────────────────── */ --max-width: 1280px; --content-width: 60rem; /* comfortable prose measure inside blocks */ --container-pad: clamp(1rem, 4vw, 1.5rem); /* ── 8. Radius (one system: 8px — SPEC §3.2) ────────────────────────────── */ --radius-sm: 4px; --radius: 8px; --radius-full: 999px; /* ── 9. Shadow ramp (exactly four steps) ────────────────────────────────── */ --shadow-1: 0 1px 4px var(--shadow-color); --shadow-2: 0 3px 10px var(--shadow-color); --shadow-3: 0 6px 24px var(--shadow-color-deep); --shadow-4: 0 12px 40px var(--shadow-color-deep); /* ── 10. Focus ring (never removed; :focus-visible styled) ──────────────── */ --focus-ring: 0 0 0 3px #fff, 0 0 0 5px var(--cc-navy); /* on light bg */ --focus-ring-dark: 0 0 0 3px #102540, 0 0 0 5px var(--cc-gold-bright); /* on navy surfaces — gold-bright ring vs navy-dark 7.3:1 ✓ (≥3:1 req.) */ /* ── 11. Motion ─────────────────────────────────────────────────────────── */ --transition: 0.22s ease; --transition-slow: 0.45s ease; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* ── 12. Brand imagery (single reference point for the courthouse set) ──── */ --img-courthouse: url('/assets/img/courthouse-hero.jpg'); --img-courthouse-banner: url('/assets/img/courthouse-banner.jpg'); --img-flag: url('/assets/img/texas-flag.jpg'); --img-seal: url('/assets/img/seal-gold.png'); }