/* ============================================================================ HSMSO Provider Self-Service - theme system Public Sans (self-hosted, SIL OFL) is the project typeface: a clean, highly legible institutional sans-serif suited to clinicians and clinic staff. Each theme is a set of colour design tokens scoped to a [data-theme="..."] attribute on . :root carries the structural tokens plus the default "Clinical Blue" palette, so the app is fully styled even before the theme script runs. ThemeService + the early script in index.html switch themes by swapping that attribute; every consuming rule in app.css and the component-scoped widget CSS reads these tokens, so the whole site - and the embedded Authorization Assistant - re-themes together. ========================================================================== */ @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/public-sans-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/public-sans-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/public-sans-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/public-sans-latin-700-normal.woff2') format('woff2'); } /* -- Structural tokens + default theme (Clinical Blue) -------------------- */ :root { color-scheme: light; --font-sans: 'Public Sans', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --radius: 14px; --radius-sm: 10px; /* Clinical Blue - calm, airy, the default. */ --brand: #143a5e; --brand-soft: #1d4f7c; --accent: #2f7fd1; --accent-strong: #246bb4; --accent-soft: #e8f1fa; --on-brand: #ffffff; --on-brand-muted: #a9bed2; --ink: #21303f; --muted: #61707f; --line: #e0e6ec; --canvas: #f3f6f9; --surface: #ffffff; --surface-2: #f7f9fb; --ok: #1f8a4c; --ok-bg: #e6f4ec; --warn: #b07d1c; --warn-bg: #f7eed7; --deny: #bf3b2d; --deny-bg: #f8e6e3; --info: #246bb4; --info-bg: #e8f1fa; --error: #bf3b2d; --error-bg: #f8e6e3; --bubble-system: #eef2f6; --bubble-doctor: #dbe9f7; --shadow: 0 10px 30px rgba(20, 58, 94, 0.12); --shadow-sm: 0 2px 10px rgba(20, 58, 94, 0.10); } /* -- Evergreen - soothing medical green ----------------------------------- */ [data-theme="evergreen"] { --brand: #14463a; --brand-soft: #1d5e4d; --accent: #0f8a6a; --accent-strong: #0c7459; --accent-soft: #e4f3ee; --on-brand: #ffffff; --on-brand-muted: #a7c4ba; --ink: #22302c; --muted: #5f6f69; --line: #dde7e2; --canvas: #f2f7f5; --surface: #ffffff; --surface-2: #f6faf8; --ok: #1f8a4c; --ok-bg: #e6f4ec; --warn: #b07d1c; --warn-bg: #f6eed8; --deny: #bf3b2d; --deny-bg: #f8e6e3; --info: #0c7459; --info-bg: #e4f3ee; --error: #bf3b2d; --error-bg: #f8e6e3; --bubble-system: #eef3f1; --bubble-doctor: #d9ece5; --shadow: 0 10px 30px rgba(20, 70, 58, 0.12); --shadow-sm: 0 2px 10px rgba(20, 70, 58, 0.10); } /* -- Graphite - neutral corporate slate ----------------------------------- */ [data-theme="graphite"] { --brand: #2d3540; --brand-soft: #3c4654; --accent: #4a6b8a; --accent-strong: #3c5a76; --accent-soft: #eaeef2; --on-brand: #ffffff; --on-brand-muted: #aeb6c0; --ink: #232a32; --muted: #66707b; --line: #e1e4e8; --canvas: #f4f5f7; --surface: #ffffff; --surface-2: #f7f8fa; --ok: #2f7d4f; --ok-bg: #e8f2ea; --warn: #9c7320; --warn-bg: #f4eedb; --deny: #b3473a; --deny-bg: #f5e7e4; --info: #3c5a76; --info-bg: #eaeef2; --error: #b3473a; --error-bg: #f5e7e4; --bubble-system: #eef0f3; --bubble-doctor: #e0e6ec; --shadow: 0 10px 30px rgba(45, 53, 64, 0.13); --shadow-sm: 0 2px 10px rgba(45, 53, 64, 0.11); } /* -- Midnight - low-light dark mode --------------------------------------- */ [data-theme="midnight"] { color-scheme: dark; --brand: #0f1b2d; --brand-soft: #16263d; --accent: #5b97e6; --accent-strong: #4f86d0; --accent-soft: #1c3047; --on-brand: #ffffff; --on-brand-muted: #8fa3ba; --ink: #e6ecf3; --muted: #9aa7b6; --line: #2b3a4d; --canvas: #0c1622; --surface: #142030; --surface-2: #1b2a3c; --ok: #6cd197; --ok-bg: #173626; --warn: #e0b252; --warn-bg: #3a2f15; --deny: #e57a6e; --deny-bg: #3a201d; --info: #5b97e6; --info-bg: #1c3047; --error: #e57a6e; --error-bg: #3a201d; --bubble-system: #1c2a3a; --bubble-doctor: #21364f; --shadow: 0 12px 34px rgba(0, 0, 0, 0.45); --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.38); }