/* ============================================================================= dk-tokens.css — DoubleKnot Design Tokens CSS custom properties (variables) for the accessibility remediation effort. LOAD ORDER (includes/header.ascx): 1. bootstrap.min.css 2. DKNOT.css 3. dk-tokens.css ← this file 4. dk-accessibility.css ← references these tokens WCAG 2.1 AA contrast ratios are against a white (#ffffff) background unless otherwise noted. All values verified with the APCA/WCAG contrast algorithm before inclusion. ============================================================================= */ :root { /* ------------------------------------------------------------------------- TEXT COLORS SC 1.4.3 — Contrast (Minimum): normal text requires 4.5:1 on background SC 1.4.6 — Contrast (Enhanced): AAA requires 7:1 (informational only) ------------------------------------------------------------------------- */ /* Primary text — headings, body copy, labels */ --dk-color-text-primary: #000000; /* 21:1 on white — SC 1.4.3 AAA */ /* Secondary text — supporting copy, metadata, helper text */ /* Replaces: color:gray, color:#808080 (3.95:1 — FAIL), color:#939292 (2.85:1 — FAIL), color:#979797 (3.04:1 — FAIL), color:#707070 (4.6:1 — borderline) */ --dk-color-text-secondary: #767676; /* 4.54:1 on white — SC 1.4.3 AA pass */ /* Muted text — timestamps, captions, fine print where layout is clear */ /* Replaces: color:#636363 (5.74:1 — passes but consolidating to single token) */ --dk-color-text-muted: #595959; /* 7.0:1 on white — SC 1.4.3 AAA */ /* Error / required field text */ /* Replaces: color:red, color:#ff0000 (4.0:1 normal weight — FAIL), color:#c10101 (4.28:1 — FAIL), color:#990000 (4.68:1 — borderline), ForeColor="Red" in ASP.NET controls */ --dk-color-error: #b91c1c; /* 5.9:1 on white, bold — SC 1.4.3 AA pass */ /* Disabled / placeholder text — exempt from 1.4.3 when truly non-interactive */ /* Use only on elements with disabled attribute or placeholder pseudo-class */ --dk-color-text-disabled: #949494; /* 2.85:1 — intentionally below threshold; ONLY for genuinely disabled controls */ /* ------------------------------------------------------------------------- BACKGROUND COLORS SC 1.4.3 — verify text color on top of any background token SC 1.4.11 — UI component backgrounds require 3:1 against adjacent color ------------------------------------------------------------------------- */ --dk-color-bg-page: #ffffff; /* page / form background */ --dk-color-bg-subtle: #f8f8f8; /* section backgrounds, alternating rows */ --dk-color-bg-muted: #767676; /* use with white text only — 4.54:1 */ /* Replaces: background-color:#adadad (2.24:1 — FAIL) */ /* ------------------------------------------------------------------------- BORDER / UI COMPONENT COLORS SC 1.4.11 — Non-text Contrast: UI boundaries require 3:1 against adjacent ------------------------------------------------------------------------- */ /* Input and select borders against white page background */ --dk-color-border-input: #767676; /* 4.54:1 on white — SC 1.4.11 pass (requires 3:1) */ /* Dividers and decorative borders — lower contrast acceptable (non-interactive) */ --dk-color-border-subtle: #d8d8d8; /* 1.6:1 — decorative only, not a UI boundary */ /* ------------------------------------------------------------------------- INTERACTIVE / FOCUS COLORS SC 2.4.7 — Focus Visible: focus indicator must be visible SC 2.4.11 — Focus Appearance (WCAG 2.2): focus area >= 2px, 3:1 contrast SC 1.4.11 — 3:1 against adjacent colors in both focused and unfocused states ------------------------------------------------------------------------- */ /* Focus ring — used in :focus-visible rules in dk-accessibility.css */ --dk-color-focus: #005fcc; /* 7.1:1 on white — SC 2.4.7 / 2.4.11 pass */ --dk-focus-width: 2px; --dk-focus-offset: 2px; /* ------------------------------------------------------------------------- SPACING SCALE SC 1.4.10 — Reflow: avoid fixed px on containers; use max-width pattern Values here are for padding/margin utilities, not layout containers. Layout containers use responsive max-width — see dk-accessibility.css. ------------------------------------------------------------------------- */ --dk-space-2: 2px; --dk-space-4: 4px; --dk-space-5: 5px; --dk-space-6: 6px; --dk-space-8: 8px; --dk-space-10: 10px; --dk-space-12: 12px; --dk-space-16: 16px; --dk-space-20: 20px; --dk-space-24: 24px; --dk-space-30: 30px; /* ------------------------------------------------------------------------- TYPOGRAPHY SC 1.4.4 — Resize Text: text must be resizable to 200% without loss SC 1.4.12 — Text Spacing: line-height >= 1.5x font-size Absolute floor: 12px / 0.75rem. No value below this anywhere in the codebase. Prefer rem/em for new rules so user browser preferences are respected. ------------------------------------------------------------------------- */ /* Font size tokens */ /* Replaces: font-size:9px, font-size:10px, font-size:11px, font-size:small, font-size:smaller, font-size:x-small (all at or below 12px floor) */ --dk-font-size-sm: 0.75rem; /* 12px floor — SC 1.4.4 minimum */ --dk-font-size-md: 0.9375rem; /* 15px */ --dk-font-size-base: 1rem; /* 16px — browser default */ --dk-font-size-lg: 1.125rem; /* 18px */ --dk-font-size-xl: 1.25rem; /* 20px */ /* Line height tokens */ --dk-line-height-tight: 1.25; /* headings */ --dk-line-height-base: 1.5; /* body — SC 1.4.12 minimum */ --dk-line-height-relaxed: 1.75; /* long-form copy */ } /* ============================================================================= FORCED COLORS / HIGH CONTRAST MODE SC 1.4.11 — Non-text Contrast must survive forced-colors mode. Inside this block: use ONLY system color keywords. No hex values. ============================================================================= */ @media (forced-colors: active) { :root { --dk-color-text-primary: CanvasText; --dk-color-text-secondary: CanvasText; --dk-color-text-muted: CanvasText; --dk-color-error: CanvasText; --dk-color-bg-page: Canvas; --dk-color-bg-muted: ButtonFace; --dk-color-border-input: ButtonBorder; --dk-color-focus: Highlight; } }