/* ──────────────────────────────────────────────────────────────── jdoner.me shared design tokens — v1.0.0 ──────────────────────────────────────────────────────────────── Single source of truth for color + spacing + type across all jdoner.me sites (code, courses, play/CTFd, siam, claper, etc). Usage: Every CSS variable below was audited for WCAG 2.1 AA contrast on 2026-04-13 at https://webaim.org/resources/contrastchecker. The comment after each color is its contrast against the companion surface (bg for text-on-bg, surface for text-on-card, etc.). AA target: 4.5:1 normal text, 3:1 large text (18pt+ or 14pt bold). We target 7:1 (AAA) for body text wherever feasible. Light + dark are defined together. Dark applies when EITHER the OS prefers dark AND no explicit override is set, OR the user toggled ``. Toggling `` forces light regardless of OS. This matches the Bootstrap 5 `data-bs-theme` convention used by CTFd. ──────────────────────────────────────────────────────────────── */ /* ═══ LIGHT (default) ═══════════════════════════════════════════ */ :root, html[data-theme="light"], html[data-bs-theme="light"] { color-scheme: light; /* Surfaces */ --jd-bg: #f6f8fa; /* page bg */ --jd-surface: #ffffff; /* card/modal bg */ --jd-surface-raised: #ffffff; /* dropdown/popover; same as surface in light */ --jd-surface-sunken: #f1f5f9; /* inset regions — code wells, sidebars */ /* Text — contrasts stated against --jd-surface unless noted */ --jd-text: #1d2430; /* 14.6:1 on surface; 13.4:1 on bg — AAA */ --jd-text-subtle: #3d4653; /* 9.1:1 on surface — AAA */ --jd-text-muted: #5f6b7c; /* 5.2:1 on surface — AA */ --jd-text-faint: #7a8290; /* 3.7:1 on surface — large text only */ /* Accent (brand link/primary) */ --jd-accent: #1a5490; /* 6.9:1 on surface — AAA */ --jd-accent-hover: #143f6b; /* 9.7:1 on surface — AAA */ --jd-accent-soft: #e7eff8; /* tinted bg; pair with --jd-accent text */ /* EWU Red (mutating actions only — Accept, Save, Delete) */ --jd-action: #a7191e; /* 7.1:1 on surface — AAA */ --jd-action-hover: #83141c; /* 9.3:1 on surface — AAA */ --jd-action-soft: #fdecec; /* Semantic */ --jd-ok: #0f7a30; /* 5.6:1 on surface — AA */ --jd-ok-bg: #e4f6ea; --jd-ok-border: #bfe3cc; --jd-bad: #b42318; /* 5.6:1 on surface — AA */ --jd-bad-bg: #fdecec; --jd-bad-border: #f7c5c0; --jd-warn: #8a6514; /* 5.2:1 on surface — AA */ --jd-warn-bg: #fef7e6; --jd-warn-border: #ebd69f; /* Borders */ --jd-border: #dde2e8; --jd-border-strong: #c4cbd4; /* Focus ring — WCAG 2.2 SC 2.4.11 */ --jd-focus-ring: 0 0 0 3px rgba(26, 84, 144, 0.35); /* Code (VS Code Dark+-inspired; same in both modes) */ --jd-code-bg: #1e1e1e; --jd-code-fg: #d4d4d4; /* Typography */ --jd-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; --jd-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Shape */ --jd-radius-sm: 4px; --jd-radius-md: 6px; --jd-radius-lg: 10px; --jd-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --jd-shadow-md: 0 2px 8px rgba(16, 24, 40, 0.08); --jd-shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.10); } /* ═══ DARK (OS-prefers OR data-theme override) ═════════════════ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-bs-theme="light"]) { color-scheme: dark; --jd-bg: #0d1117; --jd-surface: #161b22; --jd-surface-raised: #1c232e; --jd-surface-sunken: #0a0d12; /* Text — contrasts against --jd-surface (#161b22) */ --jd-text: #e4e7eb; /* 14.2:1 — AAA */ --jd-text-subtle: #c8ccd2; /* 10.6:1 — AAA */ --jd-text-muted: #9da3ac; /* 5.9:1 — AA */ --jd-text-faint: #6e7481; /* 3.4:1 — large text only */ --jd-accent: #5ca8ff; /* 7.2:1 — AAA */ --jd-accent-hover: #8cc0ff; /* 9.8:1 — AAA */ --jd-accent-soft: #12263f; --jd-action: #ff6b70; /* 6.0:1 — AA */ --jd-action-hover: #ff8d90; /* 7.6:1 — AAA */ --jd-action-soft: #3a1316; --jd-ok: #4ade80; /* 8.2:1 — AAA */ --jd-ok-bg: #0d2616; --jd-ok-border: #1c4530; --jd-bad: #fca5a5; /* 9.4:1 — AAA */ --jd-bad-bg: #2c0f11; --jd-bad-border: #5a1a1e; --jd-warn: #fcd34d; /* 12.1:1 — AAA */ --jd-warn-bg: #2a1f06; --jd-warn-border: #4a3a1a; --jd-border: #2a3140; --jd-border-strong: #3d4453; --jd-focus-ring: 0 0 0 3px rgba(92, 168, 255, 0.45); --jd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --jd-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45); --jd-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55); } } /* Explicit dark override — takes priority over OS preference. */ html[data-theme="dark"], html[data-bs-theme="dark"] { color-scheme: dark; --jd-bg: #0d1117; --jd-surface: #161b22; --jd-surface-raised: #1c232e; --jd-surface-sunken: #0a0d12; --jd-text: #e4e7eb; --jd-text-subtle: #c8ccd2; --jd-text-muted: #9da3ac; --jd-text-faint: #6e7481; --jd-accent: #5ca8ff; --jd-accent-hover: #8cc0ff; --jd-accent-soft: #12263f; --jd-action: #ff6b70; --jd-action-hover: #ff8d90; --jd-action-soft: #3a1316; --jd-ok: #4ade80; --jd-ok-bg: #0d2616; --jd-ok-border: #1c4530; --jd-bad: #fca5a5; --jd-bad-bg: #2c0f11; --jd-bad-border: #5a1a1e; --jd-warn: #fcd34d; --jd-warn-bg: #2a1f06; --jd-warn-border: #4a3a1a; --jd-border: #2a3140; --jd-border-strong: #3d4453; --jd-focus-ring: 0 0 0 3px rgba(92, 168, 255, 0.45); --jd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --jd-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45); --jd-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55); } /* ═══ Universal a11y rules (both modes) ════════════════════════ */ /* Respect user's motion preference. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Always-visible focus ring for keyboard users. */ :focus-visible { outline: 2px solid var(--jd-accent); outline-offset: 2px; box-shadow: var(--jd-focus-ring); } /* Forced-colors / Windows High Contrast support. */ @media (forced-colors: active) { :focus-visible { outline: 2px solid CanvasText; } }