/* ============================================================================ lc-tokens.css — LC.Learn design foundation (Task 1) ---------------------------------------------------------------------------- Place at the TOP of wwwroot/css/site.css, or load as a separate stylesheet immediately AFTER bootstrap.min.css and BEFORE the rest of site.css. Derived from values already shipping in site.css, _Layout.cshtml.css and _Matching.cshtml. All TD-194 CI-enforced pairs are preserved unchanged. Contrast ratios in comments are measured, not estimated. VERIFIED ENVIRONMENT FACT: the vendored Bootstrap is v5.1.0 (wwwroot/lib/bootstrap/dist/css/bootstrap-reboot.css header). In 5.1 the ONLY element that consumes CSS custom properties is `body`, via _reboot. Component colours are Sass-compiled literals. Do not add --bs-btn-*, --bs-secondary-color, --bs-tertiary-bg, --bs-border-radius, --bs-link-color, --bs-primary-bg-subtle or --bs-success-bg-subtle: they do not exist in 5.1 and will silently no-op. ========================================================================== */ :root { /* ── Palette ────────────────────────────────────────────────────────────── */ --lc-base: #ffffff; --lc-surface-2: #f8f9fa; --lc-surface-3: #e9ecef; --lc-border: #dee2e6; /* 1.30:1 vs base — DECORATIVE ONLY */ --lc-border-strong: #adb5bd; /* 2.07:1 vs base — DECORATIVE ONLY */ --lc-border-control: #888888; /* 3.54:1 vs base — WCAG 1.4.11 AA */ --lc-text-muted: #495057; /* 8.18:1 on base, 7.76:1 on surf-2 */ --lc-text: #212529; /* 15.43:1 on base */ --lc-primary: #1b6ec2; /* 5.18:1 both directions vs white */ --lc-primary-hover: #1861ac; /* 6.28:1 with white */ --lc-primary-emphasis: #1565c0; /* 5.03:1 on primary-subtle — TD-194 */ --lc-primary-subtle: #e3f2fd; --lc-on-primary: #ffffff; --lc-focus-ring: #4a7eb8; /* 4.23:1 vs base — TD-194, LOCKED */ --lc-success: #198754; /* 4.53:1 on base */ --lc-success-emphasis: #2e7d32; /* 4.56:1 on success-subtle — TD-194 */ --lc-success-subtle: #e8f5e9; --lc-info: #1b6ec2; /* "incorrect" is informational, calm */ --lc-info-surface: #eef4fb; /* 4.68:1 with --lc-info */ --lc-danger-glyph: #dc3545; /* 4.53:1 on base — ✗ GLYPH ONLY */ /* There is deliberately NO --lc-danger-surface. A wrong answer never gets a red ground; see the brief. --lc-danger-glyph exists for .cg-mt-ko and for .alert-danger (a genuine system fault, not a learner error). */ /* ── Type ───────────────────────────────────────────────────────────────── */ /* Copied verbatim from --bs-font-sans-serif in the vendored 5.1 file, INCLUDING the four emoji families — the flashcard 🔊 glyph and the course-tree 📖 / 🎮 marks depend on them. */ --lc-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Root font-size stays 14px < 768px, 16px >= 768px (unchanged). Both computed sizes are given; the mobile column is the constraint. */ --lc-text-xs: 0.75rem; /* 10.5 / 12 px — UPPERCASE MICRO-LABELS ONLY */ --lc-text-sm: 0.875rem; /* 12.25 / 14 px */ --lc-text-base: 1rem; /* 14 / 16 px */ --lc-text-md: 1.125rem; /* 15.75 / 18 px */ --lc-text-lg: 1.375rem; /* 19.25 / 22 px */ --lc-text-xl: 1.75rem; /* 24.5 / 28 px */ --lc-text-2xl: 2.25rem; /* 31.5 / 36 px */ --lc-leading-tight: 1.25; --lc-leading-snug: 1.4; --lc-leading-normal: 1.6; --lc-leading-loose: 1.8; /* shipped passage value, kept for long-form */ --lc-weight-normal: 400; --lc-weight-medium: 500; --lc-weight-semi: 600; /* 700 is retired */ /* ── Space · radius · elevation ─────────────────────────────────────────── */ --lc-space-1: 0.25rem; --lc-space-2: 0.5rem; --lc-space-3: 0.75rem; --lc-space-4: 1rem; --lc-space-5: 1.5rem; --lc-space-6: 2rem; --lc-space-7: 3rem; --lc-radius-sm: 4px; --lc-radius-md: 8px; --lc-radius-lg: 12px; --lc-radius-pill: 999px; --lc-shadow-0: none; /* card default */ --lc-shadow-1: 0 1px 3px rgba(0, 0, 0, .06); /* card hover */ --lc-shadow-2: 0 2px 8px rgba(0, 0, 0, .10); /* .signpost */ --lc-shadow-3: 0 8px 24px rgba(0, 0, 0, .18); /* dialog */ /* ── Motion ─────────────────────────────────────────────────────────────── */ --lc-duration-fast: 120ms; /* colour, opacity, border */ --lc-duration-base: 180ms; /* reveal, crossfade, disclosure */ --lc-duration-slow: 240ms; /* CEILING — nothing exceeds this */ --lc-ease: cubic-bezier(.2, 0, .2, 1); /* settles, never springs */ --lc-focus-width: 3px; --lc-focus-offset: 2px; /* ── Intensity tiers (Task 5) ───────────────────────────────────────────── */ --lc-duration-arcade: 240ms; /* tier 2 ceiling — same as tier 1 */ --lc-duration-illus: 600ms; /* tier 3, reserved */ /* DWELLS ARE NOT TRANSITIONS. A dwell is how long information stays legible; a transition is ornament. Dwells are never zeroed, never tier-dependent, and exempt from the 240ms ceiling. */ --lc-dwell-read: 1400ms; /* Memory mismatch reveal */ --lc-dwell-min: 1000ms; /* floor for any auto-dismiss */ } /* Zeroing the duration tokens here means every transition written in those tokens gets its reduced-motion variant for free. Never write a bare duration (e.g. `180ms`) anywhere in the codebase — it defeats this. */ @media (prefers-reduced-motion: reduce) { :root { --lc-duration-fast: 0ms; --lc-duration-base: 0ms; --lc-duration-slow: 0ms; --lc-duration-arcade: 0ms; --lc-duration-illus: 0ms; /* --lc-dwell-* deliberately NOT zeroed. Zeroing a transition removes animation; zeroing a dwell removes the learning. */ } } /* ============================================================================ BRIDGE — the complete list of free rides on Bootstrap 5.1 ========================================================================== */ :root { --bs-body-font-family: var(--lc-font-sans); --bs-body-color: var(--lc-text); --bs-body-bg: var(--lc-base); } /* ============================================================================ SHIM — everything else needs a real rule. Loads from site.css, i.e. AFTER bootstrap.min.css. ========================================================================== */ /* bootstrap.css:7705 — `color: #6c757d !important`. Needs !important to win. Fixes a live WCAG 1.4.3 failure: #6c757d on #f8f9fa is 4.45:1. */ .text-muted { color: var(--lc-text-muted) !important; } /* bootstrap-reboot.css — `a { color:#0d6efd }` / `a:hover { #0a58ca }` */ a { color: var(--lc-primary); } a:hover { color: var(--lc-primary-hover); } /* bootstrap.css:2965 — compiled literals, no var() hooks in 5.1. Stock #0d6efd with white text is 4.50:1. This is the AA fix, and the only place the "one blue" consolidation actually lands on a control. */ .btn-primary { color: var(--lc-on-primary); background-color: var(--lc-primary); border-color: var(--lc-primary); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { color: var(--lc-on-primary); background-color: var(--lc-primary-hover); border-color: var(--lc-primary-hover); } /* 5.1 ships #6c757d text on a #6c757d border. Text to full contrast, border to the 3:1 control token. */ .btn-outline-secondary { color: var(--lc-text); border-color: var(--lc-border-control); } .btn-outline-secondary:hover, .btn-outline-secondary:focus { color: var(--lc-text); background-color: var(--lc-surface-2); border-color: var(--lc-text-muted); } /* OPTIONAL — unify focus indication. site.css currently paints a #258cfb box-shadow ring (3.37:1, passes 1.4.11) while TD-194 chose the #4a7eb8 outline. Pick one. If you adopt this, delete the existing `.btn:focus, .btn:active:focus, ...` box-shadow rule in site.css. */ .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible { outline: var(--lc-focus-width) solid var(--lc-focus-ring); outline-offset: var(--lc-focus-offset); box-shadow: none; } /* Fixes a live WCAG 1.4.3 failure: #adb5bd on white is 2.07:1. */ .content-sequence__empty-state { color: var(--lc-text-muted); }