/* tokens.css — Single source of truth for Final Bell (--fb-*) design tokens. * * Loaded as the first in _base.html so every per-surface stylesheet * (css/forms.css, css/chrome.css, css/auth.css, classroom-dispatcher.css, * curb-dispatcher.css, greeter.css) * inherits from one canonical block. To change a token value, change it * here only — no per-file hunting required. * * Tokens trace to docs/ux/reference/build-spec.md. * Dispatcher amber tokens added per parity-audit G5 / build-spec dispatcher * section — rationale: warm amber is visually distinct from the cool-blue * office chrome so an active arrival is unambiguous. */ :root { /* ── Palette ─────────────────────────────────────────────── */ --fb-sidebar-1: #182638; --fb-canvas: #E9ECF3; --fb-surface: #FFFFFF; --fb-surface-2: #F4F6F8; --fb-border: #DCE0E6; --fb-row-hover: #E9ECEF; /* GLEAM-117: hover/focus-visible bg for rows + account menu items (build-spec §teardown.md:861) */ /* Greeter overlay-bar container — same hue as --fb-border but a * separate semantic token for the search-pill surround (parity * lock-in §2 row 1; greeter.css §Search-pill container). */ --fb-overlay-bar: #DCE0E6; /* Text */ --fb-text: #495057; --fb-text-muted: #5C7185; /* GLEAM-119: darkened from #71879A; ≈4.6:1 on white — passes WCAG AA small text */ --fb-text-section: #54697D; /* GLEAM-105: darkened from #8EA6BA; ≈5.4:1 on white, ≈4.92:1 on canvas — passes WCAG AA */ --fb-text-sidebar: #BFD4E4; --fb-text-input: #596165; --fb-text-heading: #3D4144; --fb-text-inverted: #FFFFFF; /* Text on dark surfaces (Live Dismissal Progress drawer); per docs/ux/reference/build-spec.md */ /* ── Live Dismissal Progress drawer surface ───────────────── * Navy drawer chrome and the modal-style scrim that sits behind * it. Defined here so chrome.css's .progress-drawer / .progress- * drawer-scrim can resolve the tokens (added 2026-05-02 — Proof * caught the drawer rendering transparent because the build only * referenced these vars, never defined them). Values trace to * docs/ux/reference/build-spec.md §"Modal — Live Dismissal Progress * Drawer" + screenshots/18. */ --fb-drawer: #283B54; --fb-scrim: rgba(0, 0, 0, 0.4); /* GLEAM-072: white-on-dark tints for the navy .progress-drawer surface. * Four alpha steps replace five scattered rgba(255,255,255,X) literals * in chrome.css so future drawer palette changes have one call-site. */ --fb-on-dark-tint-xs: rgba(255, 255, 255, 0.05); --fb-on-dark-tint-sm: rgba(255, 255, 255, 0.06); --fb-on-dark-tint-md: rgba(255, 255, 255, 0.08); --fb-on-dark-tint-lg: rgba(255, 255, 255, 0.1); /* GLEAM-077: semi-opaque press-fill overlay used by .curb-release-fill * left-to-right sweep animation. Centralised so other hold-to-fire * interactions can reuse the same dark wash. */ --fb-press-overlay: rgba(0, 0, 0, 0.18); /* GLEAM-076: scroll-shadow alpha used in the Lea Verou radial-gradient * pattern (auth.css, chrome.css ×2). All three call-sites agree on * this value; centralising it keeps them consistent. */ --fb-scroll-shadow: rgba(0, 0, 0, 0.08); /* Brand / status */ --fb-blue: #3FA9F5; /* GLEAM-006: --fb-blue-hover (#3998DB) removed — was never referenced by any * CSS rule. .btn-primary:hover uses --fb-blue-pressed (#175A8A); see forms.css. */ --fb-blue-strong: #1F6FAA; /* GLEAM-106: ≈4.6:1 on white — WCAG AA for small text CTAs */ --fb-blue-pressed: #175A8A; /* GLEAM-055: hover/pressed fill for .btn-primary; ~8 units darker than --fb-blue-strong */ --fb-success: #7AC943; --fb-danger: #B82D2D; /* Focus-ring outline color — referenced by the global *:focus-visible * rule in chrome.css (parity audit G1). GLEAM-005: changed from * #3FA9F5 (~2.46:1 on white, fails WCAG 1.4.11) to --fb-blue-strong * (#1F6FAA, ~4.6:1 on white) so the focus indicator meets Non-text * Contrast. The inset variant is updated in parallel. */ --fb-focus: var(--fb-blue-strong); /* ── Shadows ──────────────────────────────────────────────── */ /* GLEAM-005: changed from rgb(63,169,245) (#3FA9F5, ~2.46:1) to * rgb(31,111,170) (#1F6FAA, ~4.6:1) to pass WCAG 1.4.11 non-text contrast. */ --fb-sh-focus-ring: rgb(31,111,170) 0 0 0 2px inset; /* GLEAM-044: dark-surface focus ring (light ring on --fb-drawer #283B54). * Use on any element whose host surface is navy/dark so the ring has * sufficient contrast. 40% white at ≈4.5:1 on the drawer navy. */ --fb-sh-focus-ring-on-dark: rgba(255, 255, 255, 0.4) 0 0 0 2px; /* GLEAM-100: error-state focus ring — danger hue so red border + ring * signal the same state rather than colliding with the blue focus ring. */ --fb-sh-focus-ring-error: rgb(184,45,45) 0 0 0 2px inset; --fb-sh-overlay: rgba(0,0,0,0.3) 0 1px 3px 0; /* GLEAM-024: light card-lift shadow (greeter family-card, connectivity-banner). * Intentionally lighter than --fb-sh-overlay (0.3) — these surfaces sit on * the page body rather than over a scrim and need a subtle lift only. */ --fb-sh-card-soft: rgba(0,0,0,0.05) 0 1px 3px 0; --fb-sh-deep: rgba(0,0,0,0.15) 0 4px 20px 0; /* ── Border-radius scale ──────────────────────────────────── */ --fb-r-sm: 2px; --fb-r-md: 4px; --fb-r-card: 6px; --fb-r-lg: 8px; --fb-r-tile: 24px; /* Pill radius — parity-locked to /pmk/ student-search overlay * (build-spec §Student Search Overlay → input radius 40px; * docs/decisions/carrider-v1-parity-lockin.md §2 row 1). * Used by greeter.html manual-entry and paste-token inputs, * and chrome.css .student-search-input. */ --fb-r-input-pill: 40px; /* Generic pill radius — use for badge chips, status pills, and any * fully-rounded element that is NOT an input field. */ --fb-r-pill: 999px; /* ── Spacing scale ────────────────────────────────────────── */ --fb-s-1: 4px; --fb-s-2: 8px; --fb-s-3: 12px; --fb-s-4: 16px; --fb-s-5: 20px; --fb-s-6: 24px; --fb-s-8: 32px; --fb-s-12: 48px; /* sidebar-link left gutter, reserves space for active-state accent rail */ --fb-nav-indent: 52px; /* ── Flash / callout semantic tints ───────────────────────── * Named tokens replace hardcoded hex literals in .flash-error, * .flash-success, .backup-warning, .callout-warn, .badge-warn * so future palette tweaks happen here only (GLEAM-007). * GLEAM-075: removed stale .role-pill-warn reference. */ --fb-flash-error-bg: #FDECEC; --fb-flash-error-border: #F4C7C7; --fb-flash-success-bg: #ECF8E1; --fb-flash-success-fg: #3F7D1D; --fb-flash-success-border:#C5E5A2; --fb-warn-bg: #FFF7E0; --fb-warn-border: #F0DDA0; --fb-warn-fg: #6E5700; /* GLEAM-027: info flash — light-blue tint used by .flash-info; kept * separate from --fb-badge-info-* (which are slightly deeper for * small pill contrast) so palette tweaks land in one place. */ --fb-flash-info-bg: #E8F1FB; --fb-flash-info-fg: #1F6FAA; --fb-flash-info-border: #C1DAEE; /* ── Badge semantic tints ──────────────────────────────────── * Distinct from the flash/callout tints above: badge pills are * small (11px, 2×8px padding) so they use slightly deeper * backgrounds and darker foregrounds than the larger flash * banners for adequate contrast at that size (GLEAM-019). * Any future palette re-spec should touch both sets. */ --fb-badge-ok-bg: #e7f5ec; --fb-badge-ok-fg: #1a6b3a; --fb-badge-warn-bg: #fff3d6; --fb-badge-warn-fg: #855a08; --fb-badge-warn-border: #f0d48a; /* GLEAM-006: curb-pickup-pill-new border */ --fb-badge-error-bg: #fde0e0; --fb-badge-error-fg: #8a1c1c; --fb-badge-muted-bg: #eef0f3; --fb-badge-muted-fg: #5b6470; /* Info (blue) badge — photo-ID pill on curb pickup cards (GLEAM-006). * Foreground uses --fb-blue-strong (#1F6FAA, ≈4.6:1 on white) so the * pill passes WCAG AA at the small badge size. */ --fb-badge-info-bg: #deedf7; --fb-badge-info-fg: #1f6faa; --fb-badge-info-border: #b3d4ec; /* ── Status / brand derived tints ─────────────────────────── * Derived from --fb-success (#7AC943) for border and pressed * states on the curb-release button (GLEAM-021). */ --fb-success-strong: #3F7D1D; /* GLEAM-051: resting fill for .curb-release; ≈5.5:1 on white — WCAG AA. Matches --fb-flash-success-fg. */ --fb-success-border: #5EA734; --fb-success-pressed: #4F8E2A; /* GLEAM-074: soft success glow for the .progress-drawer-total ring * (the pseudo-doughnut around the X% released percentage). RGB * matches --fb-success (#7AC943) at 25% opacity. */ --fb-success-glow: rgba(122, 201, 67, 0.25); /* ── Dispatcher-only highlight palette ─────────────────────── * Warm amber, distinct from the cool office-blue chrome so an * active arrival is unambiguous across classroom and curb views. * Three independent signals (color, rail, ring) satisfy the * "not color alone" accessibility AC. */ --cd-highlight-bg: #FFF6DC; --cd-highlight-rail: #F4A736; --cd-highlight-ring: rgba(244, 167, 54, 0.45); --cd-highlight-glow: rgba(244, 167, 54, 0.16); /* GLEAM-056: soft amber wash for .gr-celebrate-card glow + .cd-bullhorn-stamp background */ --cd-highlight-pulse-strong: rgba(244, 167, 54, 0.55); /* GLEAM-059: pulse keyframe 0% ring burst */ --cd-highlight-pulse-fade: rgba(244, 167, 54, 0); /* GLEAM-059: pulse keyframe 60% ring fully transparent */ /* ── Greeter scanner palette ────────────────────────────────── * Dark backdrop ensures video has contrast against the chrome. * Named tokens keep the camera-specific colors palette-traceable * even though they intentionally differ from the surface chrome. * GLEAM-078: reticle border (0.7-alpha white) and viewfinder mask * (0.35-alpha black) complete the camera-specific palette. */ --gr-scanner-bg: #0d1620; --gr-scanner-empty-title-fg: #ffffff; --gr-scanner-empty-fg: #B6C3D2; --gr-scanner-reticle: rgba(255, 255, 255, 0.7); --gr-scanner-mask: rgba(0, 0, 0, 0.35); } /* ── Heading scale tiers (GLEAM-101 / GLEAM-114) ────────────────── * * Tier Size Where used * ────────── ──── ───────────────────────────────────────────── * pill-caption 11px .role-pill, .pill, .status-pill, .admin-nav-section, .import-summary dt, .badge * caption 12px .badge, .cd-section-label, .gr-section-label * body-sm 13px .btn-sm, alt body text in .ipw-modal-detail, .cap-legend-list, .cd-empty-body, .cd-changes-summary, etc. * body 14px base body text, .cd-teacher, nav links * card-section 16px .matrix-card h2 (chrome.css), .settings-section (forms.css) * modal-title 18px .modal-card h2 (forms.css) — dialog's only heading * sub-page 20px .section-h2 (auth.css), .cd-empty-title (classroom-dispatcher.css), .progress-drawer-counter-count (chrome.css) * page-h1 28px .cd-classroom-title, .auth-card h1, .app-shell h1 * display-md 32px .dash-tile-count (chrome.css), .cd-row-name (classroom-dispatcher.css) * — legibility from across the classroom / from across the dismissal area * display-lg 36px .progress-drawer-pct (chrome.css) * — legibility from across the dismissal area * * Do not introduce new font-size values without updating this table. * ─────────────────────────────────────────────────────────────── */ /* ── Stacking-context ladder (GLEAM-009) ────────────────────────── * * Layer z-index File * ───────────────────────────── ─────── ────────────────────────────── * modal-card (.modal-card) 1100 forms.css:595 * progress-drawer (.progress-drawer) 1100 chrome.css:1131 * connectivity-toast 1101 connectivity.css:109 * connectivity-banner 1102 connectivity.css:40 * * Do not assign a new fixed z-index without updating this table. * ─────────────────────────────────────────────────────────────── */ /* ── Canonical responsive-breakpoint scale (GLEAM-034) ──────────── * * CSS @media cannot reference var() values, so breakpoints cannot * be tokens in the usual sense. Instead, all per-surface stylesheets * MUST align to the three tiers documented here. Never introduce an * ad-hoc breakpoint without updating this comment and every surface. * * Phone portrait ≤ 540 px forms.css, classroom-dispatcher.css (phone tier) * Tablet portrait ≤ 720 px chrome.css (sidebar collapses, hamburger appears) * Tablet landscape ≤ 900 px classroom-dispatcher.css (topbar stacks) * * Tablet iPad-class tier (added by tablet-breakpoints sweep, May 2026): * `(min-width: 768px) and (max-width: 1024px)` — iPad 10th gen (768) * and iPad portrait (820) used to fall into the 900-px tablet-landscape * bucket and the desktop branch above it; this band rebalances padding, * row heights, and column counts for tablet-portrait deployment per * docs/spec/v1.md §3.2 ("one device per classroom or station"). * Registered in: classroom-dispatcher.css, curb-dispatcher.css, * greeter.css, chrome.css, forms.css. * * Surfaces and their registered breakpoints (keep in sync): * chrome.css 720 px (sidebar collapse) + 540 px (progress-drawer full-width) + 768-1024 (tablet rhythm) * classroom-dispatcher.css 900 px (topbar stack) + 540 px (phone padding) + 768-1024 * curb-dispatcher.css 540 px (phone padding) + 768-1024 (tablet release-button padding) * greeter.css 540 px (topbar + main padding) + 768-1024 (tablet card spacing) * forms.css 900 px (pickup-tags-layout collapse / layout-primitive tablet split) + 720 px (layout-primitive mobile reflow) + 540 px (iOS-zoom font-size bump, touch targets) + 768-1024 * auth.css 540 px (consent-actions row layout) * bus-loader.css 540 px (bus-row wrap, bus-row-actions full-width) (GLEAM-064) * admin-dashboard.css 720 px (active-queue aq-body collapses same tier as outer dash-live-grid) * ─────────────────────────────────────────────────────────────── */