/* * tokens.css — mobile-first design tokens for the members-only /private/ app. * * Loaded before fireman.css / avfd-modern.css (see templates/base.html) so these * custom properties are available everywhere. Brand color tokens live in * avfd-modern.css (:root --avfd-*); this file adds the mobile-first primitives: * touch-target floor, no-zoom form floor, AA-passing muted text, a fluid type * scale, and a spacing scale. * * Roadmap: docs/superpowers/specs/2026-06-27-mobile-first-roadmap-design.md (Phase 0) */ :root { /* Touch-target floor (WCAG 2.5.5 / Apple HIG ~44px). */ --tap-min: 44px; /* Minimum font-size for focusable form controls on phones. At/above 16px so iOS Safari does NOT auto-zoom the viewport when a control gains focus. */ --form-control-min-font: 16px; /* AA-passing muted text. Replaces the old #8295A6 (3.09:1 on white — fails WCAG AA). #5B6B7B = ~5.48:1 on white. Carries load-bearing secondary data (shift times, message senders, event locations) across every member page. */ --text-muted: #5B6B7B; /* Fluid type scale: clamp(phone-min, viewport-fluid, desktop-max). Applied by the component primitives in Phase 1+; declared here as the single source. */ --type-xs: clamp(0.78rem, 0.74rem + 0.20vw, 0.85rem); --type-sm: clamp(0.875rem, 0.84rem + 0.20vw, 0.95rem); --type-base: clamp(1rem, 0.97rem + 0.20vw, 1.0625rem); --type-lg: clamp(1.10rem, 1.05rem + 0.40vw, 1.25rem); --type-h2: clamp(1.35rem, 1.20rem + 0.90vw, 1.75rem); --type-h1: clamp(1.55rem, 1.30rem + 1.30vw, 2.25rem); /* Spacing scale for component-internal gaps. */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; } /* * Dark-mode token overrides. Inert until Phase 1/3 sets data-bs-theme="dark" on * ; defined now so dark mode is correct-by-construction (Bootstrap 5.3 * built-in color modes). --text-muted here targets ~5.6:1 on the dark navy * surface (#1A2332 / --avfd-navy). */ [data-bs-theme="dark"] { --text-muted: #9DA8B3; } /* Bootstrap 5.3 color modes restyle .card/.table/.dropdown/.form-control etc. automatically under data-bs-theme="dark"; we only need to override the custom light surfaces fireman.css/avfd-modern.css hardcode (the body backdrop). The higher-specificity attribute selector wins over the plain `body` rules regardless of file order. Full dark-mode polish lands in Phase 3. */ [data-bs-theme="dark"] body { background-color: #0E1622; color: #DDE3EA; } /* Dashboard widget surfaces hardcode brand light colors; override for the Phase 1 dark pilot (the broader dark-surface sweep is Phase 3). */ [data-bs-theme="dark"] .dashboard-widget .card-header h5 { color: #E6E9EE; } [data-bs-theme="dark"] .dashboard-widget .card-footer { background-color: #1A2230; } /* Sidebar chrome is hardcoded light in fireman.css; darken it so the pinned (desktop) and offcanvas (mobile) nav match the dark body. !important mirrors the !important on the desktop .sidebar.offcanvas-lg background rule. */ [data-bs-theme="dark"] .sidebar, [data-bs-theme="dark"] .sidebar.offcanvas-lg { background-color: #131C2B !important; border-color: #2A3A52; } [data-bs-theme="dark"] .sidebar .sidebar-search { background-color: #0E1622; border-color: #2A3A52; } [data-bs-theme="dark"] .sidebar .sidebar-search input { background-color: #1B2740; color: #DDE3EA; border-color: #2A3A52; } [data-bs-theme="dark"] .sidebar .accordion-button, [data-bs-theme="dark"] .sidebar .nav-link-single, [data-bs-theme="dark"] .sidebar .accordion-body a { color: #C7D0DB; } [data-bs-theme="dark"] .sidebar .accordion-button:not(.collapsed) { color: #FFFFFF; }