/* ══════════════════════════════════════════════════════════════════════════ CareOS — Canonical Design Tokens · "Clinical Calm Mission Control" CAREOS-APP-SHELL-DESIGN-SYSTEM-FOUNDATION-001 THE single source of truth for the premium CareOS app-shell foundation. Pages migrated to the new shell link ONLY this file for tokens — they must NOT declare their own competing :root design system (enforced by backend/scripts/validate-careos-app-shell-design-system-foundation001.js). Values preserve the existing dominant portal palette (blue #2563EB, green #059669, amber #D97706, red #DC2626, slate neutrals, bg #F8FAFC) so migrated pages render consistently with the clinically-reviewed generation (BHI / onboarding). New semantic `--cx-*` tokens formalize the system; legacy `--blue/--green/...` aliases are retained so shared utilities that reference them (toast, program badges) keep resolving. Presentation only. No behavior, routes, or workflow. Theme-aware: a future dark mode is prepared via [data-theme="dark"]; NO automatic time-based switching — user preference is authoritative. ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── A. COLOR — semantic surface / border / text ─────────────────────── */ --cx-canvas: #F6F8FB; /* application background */ --cx-surface: #FFFFFF; /* elevated cards / panels */ --cx-surface-subtle: #F8FAFC; /* subtle fills, zebra, wells */ --cx-surface-hover: #F1F5F9; /* row / control hover */ --cx-surface-sunken: #EEF2F7; /* inset areas, track backgrounds */ --cx-border: #E2E8F0; /* default hairline border */ --cx-border-strong: #CBD5E1; /* inputs, dividers that must read */ --cx-border-subtle: #F1F5F9; /* faint internal separators */ --cx-text: #0F172A; /* primary text / ink */ --cx-text-secondary: #475569; /* secondary text */ --cx-text-muted: #64748B; /* metadata, captions */ --cx-text-faint: #94A3B8; /* placeholders, icons ONLY — never body text */ --cx-text-on-accent: #FFFFFF; /* text on saturated fills */ /* ── Navigation (deep clinical navy) ── */ --cx-nav-bg: #0B1829; --cx-nav-bg-elevated: #111F33; --cx-nav-hover: #172438; --cx-nav-active: rgba(37,99,235,0.16); --cx-nav-text: #94A3B8; --cx-nav-text-active: #FFFFFF; --cx-nav-section: #475569; --cx-nav-icon-active: #60A5FA; /* ── Action / brand ── */ --cx-action: #2563EB; /* primary action */ --cx-action-hover: #1D4ED8; --cx-action-active: #1E40AF; --cx-action-soft: #EFF6FF; /* soft brand fill */ --cx-action-soft-border:#BFDBFE; /* ── Focus ── */ --cx-focus: #2563EB; --cx-focus-ring: 0 0 0 3px rgba(37,99,235,0.35); /* ── B. STATUS — clinical / operational semantics ────────────────────── */ /* Each has: base (icon/border), soft bg (fill), ink (text-on-soft). */ --cx-info: #2563EB; --cx-info-soft: #EFF6FF; --cx-info-ink: #1E40AF; --cx-success: #059669; --cx-success-soft: #ECFDF5; --cx-success-ink: #065F46; --cx-warning: #D97706; --cx-warning-soft: #FFFBEB; --cx-warning-ink: #854D0E; --cx-danger: #DC2626; --cx-danger-soft: #FEF2F2; --cx-danger-ink: #991B1B; --cx-neutral: #64748B; --cx-neutral-soft: #F1F5F9; --cx-neutral-ink: #334155; --cx-disabled: #94A3B8; --cx-disabled-soft:#F1F5F9; --cx-disabled-ink:#64748B; /* Intelligence / assistive analysis — used sparingly, never for chrome */ --cx-intel: #7C3AED; --cx-intel-soft: #F5F3FF; --cx-intel-ink: #5B21B6; /* Clinical risk ramp (KDIGO-aligned) */ --cx-risk-low: #059669; --cx-risk-low-soft: #ECFDF5; --cx-risk-moderate: #CA8A04; --cx-risk-moderate-soft: #FEF9C3; --cx-risk-high: #EA580C; --cx-risk-high-soft: #FFF7ED; --cx-risk-very-high: #DC2626; --cx-risk-very-high-soft: #FEF2F2; /* Program accents (subtle identity only) */ --cx-prog-ccm: #2563EB; --cx-prog-rpm: #2563EB; --cx-prog-pcm: #7C3AED; --cx-prog-bhi: #059669; --cx-prog-tcm: #D97706; /* ── C. TYPOGRAPHY ───────────────────────────────────────────────────── */ --cx-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --cx-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --cx-num: "tnum" 1, "lnum" 1; /* tabular, lining numerals for metrics */ --cx-fs-display: 32px; --cx-lh-display: 38px; --cx-fw-display: 700; --cx-fs-h1: 24px; --cx-lh-h1: 30px; --cx-fw-h1: 700; /* page title */ --cx-fs-h2: 18px; --cx-lh-h2: 24px; --cx-fw-h2: 650; /* section title */ --cx-fs-h3: 15px; --cx-lh-h3: 20px; --cx-fw-h3: 600; /* card title */ --cx-fs-body: 14px; --cx-lh-body: 21px; --cx-fw-body: 400; --cx-fs-sm: 13px; --cx-lh-sm: 19px; --cx-fs-label: 12px; --cx-lh-label: 16px; --cx-fw-label: 600; /* uppercase labels */ --cx-fs-meta: 11px; --cx-lh-meta: 15px; --cx-fw-meta: 500; /* metadata/captions */ --cx-fs-table: 13px; --cx-lh-table: 18px; --cx-fs-kpi: 28px; --cx-lh-kpi: 32px; --cx-fw-kpi: 700; /* numeric KPI */ --cx-tracking-label: 0.04em; /* ── D. SPACING (4px base) ───────────────────────────────────────────── */ --cx-space-0: 0; --cx-space-1: 4px; --cx-space-2: 8px; --cx-space-3: 12px; --cx-space-4: 16px; --cx-space-5: 20px; --cx-space-6: 24px; --cx-space-7: 32px; --cx-space-8: 40px; --cx-space-9: 48px; --cx-space-10: 64px; /* ── E. RADII ────────────────────────────────────────────────────────── */ /* Premium clinical evolution: softer, larger radii so cards/controls feel calm and modern (per owner mood board) without glassmorphism or decoration. */ --cx-radius-sm: 8px; --cx-radius-md: 11px; --cx-radius-lg: 16px; /* card */ --cx-radius-xl: 22px; /* modal */ --cx-radius-pill: 999px; /* ── F. SHADOWS / elevation ──────────────────────────────────────────── */ --cx-shadow-flat: none; /* Softer, more diffuse elevation so surfaces read as calm premium cards floating on the canvas (mood-board direction) — still restrained, no heavy drop shadows. */ --cx-shadow-subtle: 0 1px 2px rgba(15,23,42,0.04), 0 6px 16px rgba(15,23,42,0.05); --cx-shadow-raised: 0 2px 8px rgba(15,23,42,0.05), 0 16px 40px rgba(15,23,42,0.08); --cx-shadow-modal: 0 24px 56px rgba(15,23,42,0.20), 0 6px 16px rgba(15,23,42,0.10); --cx-shadow-focus: var(--cx-focus-ring); /* ── G. LAYOUT ───────────────────────────────────────────────────────── */ --cx-sidebar-w: 256px; --cx-sidebar-rail-w: 68px; /* collapsed icon rail */ --cx-topbar-h: 60px; --cx-content-max: 1600px; /* ── H. BREAKPOINTS (documented; used in @media across shell/components) ─ --cx-bp-wide: 1440px · --cx-bp-desktop: 1200px · --cx-bp-tablet: 900px · --cx-bp-mobile: 600px (custom properties can't drive @media, so the literals are used directly; this comment is the canonical reference) */ /* ── I. Z-INDEX layers ───────────────────────────────────────────────── */ --cx-z-content: 0; --cx-z-sticky: 50; /* sticky topbar / table headers */ --cx-z-sidebar: 100; --cx-z-dropdown: 200; --cx-z-overlay: 900; /* modal/drawer backdrop */ --cx-z-modal: 1000; --cx-z-drawer: 1000; --cx-z-hamburger:1001; --cx-z-toast: 1100; /* ── J. MOTION ───────────────────────────────────────────────────────── */ --cx-ease: cubic-bezier(0.4, 0, 0.2, 1); --cx-motion-fast: 120ms var(--cx-ease); --cx-motion-standard: 180ms var(--cx-ease); --cx-motion-slow: 280ms var(--cx-ease); /* ── K. LEGACY ALIASES ─────────────────────────────────────────────── Keep the previous token names resolving so shared utilities (toast, program badges, patient-context banner) that reference them do not break when a migrated page links only this file. */ --blue:#2563EB; --blue-light:#EFF6FF; --blue-mid:#BFDBFE; --green:#059669; --green-light:#ECFDF5; --green-mid:#A7F3D0; --amber:#D97706; --amber-light:#FFFBEB; --amber-mid:#FDE68A; --red:#DC2626; --red-light:#FEF2F2; --red-mid:#FECACA; --purple:#7C3AED; --purple-light:#F5F3FF; --purple-mid:#DDD6FE; --teal:#0D9488; --teal-light:#F0FDFA; --bg:#F6F8FB; --bg-card:#FFFFFF; --text-primary:#0F172A; --text-secondary:#475569; --text-muted:#64748B; --border:#E2E8F0; --border-light:#F1F5F9; --radius-sm:6px; --radius-md:9px; --radius-lg:12px; --radius-xl:16px; --shadow-sm: var(--cx-shadow-subtle); --ease: var(--cx-motion-fast); } /* ══════════════════════════════════════════════════════════════════════════ DARK MODE — prepared, opt-in only. Applied when the root carries data-theme="dark" (set by the user via the account menu; persisted in localStorage). NEVER auto-applied by time of day. Values invert surface / text / nav while KEEPING the same status hues (recognizability) at adjusted soft/ink pairs for contrast on dark surfaces. ══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { --cx-canvas: #0B1120; --cx-surface: #111827; --cx-surface-subtle: #0F1626; --cx-surface-hover: #1B2537; --cx-surface-sunken: #0C1322; --cx-border: #1E293B; --cx-border-strong: #334155; --cx-border-subtle: #1A2333; --cx-text: #E5EDF7; --cx-text-secondary: #B4C2D6; --cx-text-muted: #8798AE; --cx-text-faint: #64748B; --cx-nav-bg: #070E1A; --cx-nav-bg-elevated:#0C1526; --cx-nav-hover: #14203a; --cx-nav-text: #8798AE; --cx-nav-text-active:#FFFFFF; --cx-action-soft: #12233F; --cx-action-soft-border: #1E3A5F; --cx-info-soft: #12233F; --cx-info-ink: #93C5FD; --cx-success-soft: #0C2A20; --cx-success-ink: #6EE7B7; --cx-warning-soft: #2A2110; --cx-warning-ink: #FCD34D; --cx-danger-soft: #2C1416; --cx-danger-ink: #FCA5A5; --cx-neutral-soft: #1B2537; --cx-neutral-ink: #CBD5E1; --cx-intel-soft: #1E1B31; --cx-intel-ink: #C4B5FD; --cx-shadow-subtle: 0 1px 2px rgba(0,0,0,0.4); --cx-shadow-raised: 0 2px 6px rgba(0,0,0,0.45), 0 8px 20px rgba(0,0,0,0.35); --cx-shadow-modal: 0 20px 48px rgba(0,0,0,0.6); --bg:#0B1120; --bg-card:#111827; --text-primary:#E5EDF7; --text-secondary:#B4C2D6; --text-muted:#8798AE; --border:#1E293B; --border-light:#1A2333; } /* ── Reduced motion: honor the OS/user preference globally ──────────────── */ @media (prefers-reduced-motion: reduce) { :root { --cx-motion-fast: 0ms; --cx-motion-standard: 0ms; --cx-motion-slow: 0ms; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }