/* ============================================================ BFD Scheduler — Design Tokens (Phase 0) — v1.1 DENSITY PASS Add to wwwroot/css/bfd-tokens.css and load BEFORE app.css. These are additive — they do not override existing variables. v1.1 (Jun 2026): scale tightened after first implementation review — display sizes and padding reduced ~10–25%; body and meta sizes unchanged. Updated from v1.0: fs-hero 46→32 · fs-h1 24→19 · fs-stat 26→21 · fs-h2 18→15.5 · card pad 20→16 · page-pad 28→22 · topbar 60→52 · sidebar 248→224. ============================================================ */ :root { /* ----- Color: surface & ink ----- */ --bfd-bg: #EEF1F5; /* page background, cool slate */ --bfd-surface: #FFFFFF; /* card background */ --bfd-surface-2: #F6F8FB; /* tinted secondary surface (week strip days, etc.) */ --bfd-border: #DCE2EB; --bfd-text: #0F1A2B; --bfd-muted: #5A6577; /* ----- Color: brand & semantic ----- */ --bfd-primary: #C8102E; /* fire-dept red — keep existing */ --bfd-primary-hover: #A60D26; --bfd-primary-soft: #FEE5E9; --bfd-accent: #1E5AD8; /* navy-blue, used for "vacation"/links */ --bfd-accent-soft: #E5EEFC; --bfd-success: #1F8A4C; --bfd-success-soft: #E2F4EA; --bfd-warn: #C77800; /* amber for "Pending" — slightly darker than gold */ --bfd-warn-soft: #FEF3DA; --bfd-danger: #C8102E; --bfd-danger-soft: #FEE5E9; /* ----- Color: hero gradient (next-shift card, etc.) ----- */ --bfd-hero-from: #0B2A5B; --bfd-hero-mid: #1A2A6B; --bfd-hero-to: #2E1A6B; --bfd-hero: linear-gradient(135deg, var(--bfd-hero-from) 0%, var(--bfd-hero-mid) 60%, var(--bfd-hero-to) 100%); /* ----- Geometry ----- */ --bfd-radius: 8px; --bfd-radius-lg: 14px; --bfd-radius-pill: 999px; /* ----- Shadows ----- */ --bfd-shadow: 0 1px 2px rgba(15,26,43,0.04), 0 2px 8px rgba(15,26,43,0.04); --bfd-shadow-lg: 0 8px 28px rgba(11,42,91,0.18); --bfd-shadow-pop: 0 18px 48px rgba(11,42,91,0.32); /* ----- Type ----- */ --bfd-font: "Inter Tight", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; /* Type scale — used inline via var(--bfd-fs-*) in bfd-components.css */ --bfd-fs-hero: 32px; /* hero date, desktop (v1.1: was 46) */ --bfd-fs-hero-md: 28px; /* hero date, tablet (v1.1: was 34) */ --bfd-fs-hero-sm: 24px; /* hero date, mobile/narrow (v1.1: was 26) */ --bfd-fs-stat: 21px; /* stat tile big number (v1.1: was 26) */ --bfd-fs-h1: 19px; /* page greeting / h1 (v1.1: was 24) */ --bfd-fs-h2: 15.5px; /* card section titles (v1.1: was 18) */ --bfd-fs-section: 14px; /* (v1.1: was 15) */ --bfd-fs-body: 13px; /* (v1.1: was 13.5) */ --bfd-fs-meta: 12px; --bfd-fs-caption: 11.5px; --bfd-fs-eyebrow: 11px; /* uppercase, letter-spacing 0.4–1.2px */ --bfd-fw-regular: 400; --bfd-fw-medium: 500; --bfd-fw-semibold: 600; --bfd-fw-bold: 700; --bfd-fw-black: 800; /* ----- Motion ----- */ --bfd-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --bfd-dur-fast: 120ms; --bfd-dur: 180ms; --bfd-dur-slow: 280ms; /* ----- Layout (v1.1 density) ----- */ --bfd-sidebar-w: 224px; /* v1.1: was 248 */ --bfd-sidebar-w-rail: 72px; /* tablet collapsed */ --bfd-topbar-h: 52px; /* v1.1: was 60 */ --bfd-page-pad: 22px; /* v1.1: was 28 */ --bfd-page-pad-mobile: 14px; /* v1.1: was 16 */ --bfd-card-pad: 16px; /* v1.1: was 20 (implicit) */ --bfd-stack-gap: 14px; /* gap between dashboard blocks (v1.1: was 20) */ } /* ----- Dark ("night") mode ----- Toggled by adding `bfd-dark` to (site.js, persisted in localStorage). Every bfd component reads these tokens, so overriding them re-skins the whole design system. body is closer than :root, so these win for all content. Strong brand colors (primary red) stay; neutrals + the light "soft" pastel fills become dark tints; a few semantics are lifted for readability on dark. */ body.bfd-dark { --bfd-bg: #0F141A; /* page */ --bfd-surface: #1A2029; /* cards */ --bfd-surface-2: #232B36; /* tinted secondary surface */ --bfd-border: #2C3540; --bfd-text: #E7ECF3; --bfd-muted: #9BA6B4; --bfd-primary-soft: rgba(200,16,46,0.24); --bfd-accent: #6E9BF2; --bfd-accent-soft: rgba(110,155,242,0.18); --bfd-success: #3FBE76; --bfd-success-soft: rgba(63,190,118,0.18); --bfd-warn: #E6A93F; --bfd-warn-soft: rgba(230,169,63,0.18); --bfd-danger: #F26B7A; --bfd-danger-soft: rgba(242,107,122,0.18); --bfd-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.35); --bfd-shadow-lg: 0 10px 30px rgba(0,0,0,0.55); --bfd-shadow-pop: 0 20px 50px rgba(0,0,0,0.65); } /* Reusable keyframes — referenced by hero pulse dot, pending stat, etc. */ @keyframes bfd-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes bfd-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @keyframes bfd-snack-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Default focus ring — gentle, brand-tinted */ :where(button, a, [role="button"]):focus-visible { outline: 2px solid var(--bfd-accent); outline-offset: 2px; }