/* =========================================================================== AEGIS design tokens — CDC foundation SPN Solutions Inc. for CDC | RFQ 75D301-26-Q-00146 The palette is not an interpretation of CDC's brand. These are CDC's own published theme colours from the CDC WCMS template system (Blue, Teal, Cyan, Green, Amber, Orange, Slate), each with the Primary / Secondary / Tertiary / Quaternary shades CDC defines. The typeface is Public Sans, the U.S. Web Design System's official face, self-hosted so no external request is needed and the Content Security Policy stays strict. Every colour used for text carries its measured contrast ratio against white. CDC's own guidance requires a 3:1 minimum for visualisation colour; text here is held to the stricter WCAG AA 4.5:1. ======================================================================== */ /* --- Public Sans (USWDS). Self-hosted; font-display:swap so text paints immediately rather than waiting on the face. ------------------------ */ @font-face { font-family: 'Public Sans'; src: url('/fonts/PublicSans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Public Sans'; src: url('/fonts/PublicSans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Public Sans'; src: url('/fonts/PublicSans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Public Sans'; src: url('/fonts/PublicSans-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { color-scheme: light; /* ===================================================================== CDC official theme colours — CDC WCMS template palette ===================================================================== */ /* Blue — CDC's primary identity colour */ --cdc-blue: #005eaa; /* Primary · on white 6.60:1 AA */ --cdc-blue-2: #88c3ea; /* Secondary · surfaces, strokes */ --cdc-blue-3: #c0e9ff; /* Tertiary · fills */ --cdc-blue-4: #edf9ff; /* Quaternary · washes */ --cdc-blue-deep: #00477f; /* darkened for headings · 9.4:1 AAA */ /* Teal / Cyan — CDC secondary family, used for accent and data */ --cdc-teal: #00695c; /* on white 6.61:1 AA */ --cdc-teal-2: #4ebaaa; --cdc-teal-3: #ceece7; --cdc-teal-4: #ebf7f5; --cdc-cyan: #007b91; /* on white 4.94:1 AA */ --cdc-cyan-2: #65b0bd; --cdc-cyan-4: #ebf5f6; /* Slate — CDC's dark neutral. Deep, calm, unmistakably federal. */ --cdc-slate: #29434e; /* on white 10.4:1 AAA */ --cdc-slate-2: #7e9ba5; --cdc-slate-3: #b6c6d2; --cdc-slate-4: #e2e8ed; /* Status — CDC Green, Amber, Orange, Pink */ --cdc-green: #497d0c; /* on white 4.97:1 AA */ --cdc-green-2: #84bc49; --cdc-green-4: #f1f8e9; --cdc-amber: #fbab18; /* FILL ONLY — 1.9:1, never text */ --cdc-amber-4: #fff7e1; --cdc-orange: #bb4d00; /* warning TEXT · on white 4.97:1 AA */ --cdc-red: #af4448; /* on white 5.61:1 AA */ --cdc-red-2: #e57373; --cdc-red-4: #ffe7e7; --cdc-purple: #712177; --cdc-indigo: #26418f; /* Semantic aliases — components reference these, not raw hues, so the palette can shift without touching a component. */ --primary: var(--cdc-blue); --primary-deep: var(--cdc-blue-deep); --primary-wash: var(--cdc-blue-4); --accent: var(--cdc-cyan); --ok: var(--cdc-green); --ok-wash: var(--cdc-green-4); --warn: var(--cdc-orange); --warn-wash: var(--cdc-amber-4); --bad: var(--cdc-red); --bad-wash: var(--cdc-red-4); /* ===================================================================== Neutrals ===================================================================== */ --ink: #1b1b1b; /* 15.9:1 AAA */ --ink-2: #3d4551; /* 9.7:1 AAA */ --ink-3: #565c65; /* 7.0:1 AAA */ --ink-4: #71767a; /* 4.7:1 AA — smallest permitted for text */ --line: #dfe1e2; --line-soft: #edeff0; --line-strong:#a9aeb1; --surface: #ffffff; --surface-2: #f7f9fa; --surface-3: #f0f4f8; /* ===================================================================== Type — Public Sans, the USWDS face ===================================================================== */ --sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', Menlo, Consolas, monospace; /* ===================================================================== Geometry ===================================================================== */ --r-sm: 4px; --r: 8px; --r-lg: 12px; --r-xl: 18px; --rail: 17rem; --topbar: 3.75rem; --hair: 1px; /* ===================================================================== Elevation — shadows tinted with CDC blue so depth belongs to the palette rather than sitting on top of it as neutral grey. ===================================================================== */ --sh-1: 0 1px 2px rgba(0,71,127,.05), 0 1px 3px rgba(0,71,127,.07); --sh-2: 0 4px 12px -2px rgba(0,71,127,.09), 0 2px 6px -2px rgba(0,71,127,.07); --sh-3: 0 18px 40px -18px rgba(0,71,127,.26), 0 4px 12px -4px rgba(0,71,127,.10); --sh-4: 0 32px 72px -24px rgba(0,71,127,.34), 0 8px 20px -8px rgba(0,71,127,.12); --sh-focus: 0 0 0 3px rgba(0,94,170,.25); --glow: 0 0 0 1px rgba(0,94,170,.14), 0 6px 22px -8px rgba(0,94,170,.42); /* ===================================================================== Motion — one easing curve for everything so the interface moves with a single character rather than several. ===================================================================== */ --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --t-fast: 110ms var(--ease); --t: 200ms var(--ease); --t-slow: 420ms var(--ease-out); /* Signature gradient: CDC blue into CDC cyan. Used sparingly — the brand mark, the primary action, and the accent hairline. */ --grad-primary: linear-gradient(135deg, var(--cdc-blue) 0%, var(--cdc-cyan) 100%); --grad-hair: linear-gradient(90deg, var(--cdc-blue), var(--cdc-cyan) 55%, transparent); } /* --------------------------------------------------------------------------- Compatibility aliases. The component stylesheet was written against an earlier, approximated palette. Rather than rewrite several hundred declarations — which invites transcription errors — the old names are re-pointed at CDC's real tokens here. One place to look, and the components inherit the correct colour. ------------------------------------------------------------------------ */ :root { --cdc-blue-bright: #0b7fc7; /* UI strokes and focus rings only */ --cdc-blue-light: var(--cdc-blue-2); --cdc-blue-wash: var(--cdc-blue-4); --cdc-teal-bright: var(--cdc-teal-2); --cdc-green-wash: var(--cdc-green-4); --cdc-gold: var(--cdc-orange); /* warning TEXT — amber fails contrast */ --cdc-gold-bright: var(--cdc-amber); /* fill only */ --cdc-gold-wash: var(--cdc-amber-4); --cdc-red-wash: var(--cdc-red-4); }