/* MPD Range — design tokens. Shared by the public site and the admin console. Status colours are AA-contrast on white; status is also conveyed by text + icon, never colour alone. */ :root { /* brand */ --brand: #1c3a5e; /* deep navy — kept identical in dark mode so header/buttons hold identity */ --brand-strong: #16304d; --brand-ink: #122740; --brand-accent: #b8862e; /* restrained gold */ --brand-accent-ink: #8f6720; --link: #1c3a5e; /* anchor / .btn-ghost color — separate from --brand so dark mode can lighten it */ /* surfaces / text */ --bg: #f4f6f9; --bg-accent: linear-gradient(180deg, #eaeff5 0%, #f4f6f9 100%); /* hero band */ --surface: #ffffff; --surface-2: #eef1f5; --surface-3: #e3e8ee; --border: #d4dbe4; --border-strong: #bcc6d2; --ink: #1a2330; --ink-2: #3a4757; --muted: #5f6e7f; --on-brand: #ffffff; /* status (calendar / bookings) */ --status-open: #1f7a4d; /* lots of time left */ --status-limited: #a8650a; /* most of the day booked */ --status-full: #8a2330; /* no free time / all-day / closure */ --status-closed: #6b7785; /* past / >90 days / range closure */ --status-pending: #a8650a; --status-approved:#1f7a4d; --status-denied: #8a2330; --status-archived:#6b7785; /* feedback */ --ok: #1f7a4d; --warn: #a8650a; --error: #8a2330; --info: #1d4ed8; /* layout */ --maxw: 1760px; /* page width — fills normal monitors; capped on ultrawides */ --maxw-prose: 70ch; /* readable prose width (.lead / .prose / .card p) */ --header-h: 64px; --radius-lg: 16px; --radius: 12px; --radius-sm: 8px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(16,24,40,.06); --shadow-soft: 0 1px 2px rgba(16,24,40,.05); --shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.08); --shadow-lg: 0 4px 8px rgba(16,24,40,.08), 0 24px 56px rgba(16,24,40,.16); --ring: 0 0 0 3px color-mix(in srgb, var(--info) 35%, transparent); /* type */ --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --fs-display: clamp(1.85rem, 1.25rem + 1.9vw, 2.7rem); --fs-1: clamp(1.5rem, 1.2rem + 0.9vw, 2rem); --fs-2: 1.375rem; --fs-3: 1.125rem; --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.8125rem; --lh: 1.6; /* spacing scale */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; /* tap target */ --tap: 44px; } /* ------------------------------------------------------------------------------------------------ Dark mode tokens. Theme is normally driven by JS (theme.js) which sets [data-theme="dark"|"light"] on before paint. The @media block is the no-JS fallback for users whose OS prefers dark. WCAG AA: all ink-on-surface combinations here are >= 4.5:1; status colours sit on tinted surfaces. ------------------------------------------------------------------------------------------------ */ :root[data-theme="dark"] { --bg: #0e141c; --bg-accent: linear-gradient(180deg, #131c27 0%, #0e141c 100%); --surface: #161e29; --surface-2: #1d2734; --surface-3: #25313f; --border: #2b3744; --border-strong: #3a4858; --ink: #e8eef5; --ink-2: #c3cedb; --muted: #93a2b3; --brand: #1c3a5e; --brand-strong: #234974; --brand-ink: #e8eef5; /* heading + branded text → light on dark */ --brand-accent: #d4a043; /* slightly brighter gold for the dark backdrop */ --brand-accent-ink: #e8b85e; --link: #7eb0e6; /* light blue — anchors / .btn-ghost on dark surfaces */ --on-brand: #ffffff; --status-open: #4ec47a; --status-limited: #e8a13d; --status-full: #ef6a78; --status-closed: #8da0b3; --status-pending: #e8a13d; --status-approved:#4ec47a; --status-denied: #ef6a78; --status-archived:#8da0b3; --ok: #4ec47a; --warn: #e8a13d; --error: #ef6a78; --info: #7eb0e6; --shadow-sm: 0 1px 2px rgba(0,0,0,.35); --shadow-soft: 0 1px 2px rgba(0,0,0,.30); --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.50); --shadow-lg: 0 4px 8px rgba(0,0,0,.35), 0 24px 56px rgba(0,0,0,.65); } @media (prefers-color-scheme: dark) { /* No-JS fallback only: applies dark tokens when the page hasn't had a theme set yet. */ :root:not([data-theme="light"]):not([data-theme="dark"]) { --bg: #0e141c; --bg-accent: linear-gradient(180deg, #131c27 0%, #0e141c 100%); --surface: #161e29; --surface-2: #1d2734; --surface-3: #25313f; --border: #2b3744; --border-strong: #3a4858; --ink: #e8eef5; --ink-2: #c3cedb; --muted: #93a2b3; --brand-ink: #e8eef5; --brand-accent: #d4a043; --brand-accent-ink:#e8b85e; --link: #7eb0e6; --status-full: #ef6a78; --status-denied: #ef6a78; --info: #7eb0e6; --error: #ef6a78; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }