/* ========================================================================== DEX HEALTH — "CLINICAL INSTRUMENT" DESIGN TOKENS One source of truth for every architecture reference page. Aesthetic: paper-warm precision. Monospaced telemetry. Hairline rules. One disciplined accent per surface, set via [data-surface] on . ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=IBM+Plex+Sans:ital,wght@0,400;0,450;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap'); :root { /* ---- Canvas & surfaces (warm paper, never pure white) ---- */ --canvas: #f4f3ee; --surface: #fdfcf9; --surface-sunken:#eeede6; --surface-ink: #131b18; /* inverted panels (patient phone, ECG wells) */ /* ---- Ink ---- */ --ink: #1b2420; --ink-secondary: #45514b; --ink-muted: #67736c; /* ≥ 4.5:1 on --surface */ --ink-faint: #8b968f; /* decorative only, never body text */ --ink-on-dark: #f2f1ea; /* ---- Hairlines & rules ---- */ --rule: #e0ded4; --rule-strong: #c9c6b9; /* ---- Surface accent (defaults to clinical; overridden below) ---- */ --accent: #0d6e63; --accent-strong: #0a574e; --accent-tint: #e3efec; --accent-glow: rgba(13, 110, 99, 0.16); /* ---- Clinical status (AA on paper & tints) ---- */ --critical: #b3271e; --critical-tint: #f9e9e6; --critical-ink: #8f1f18; --warning: #93650a; --warning-tint: #f7efdc; --warning-ink: #6e4c07; --stable: #176e45; --stable-tint: #e2f0e7; --stable-ink: #115536; --info: #205b8f; --info-tint: #e4edf5; /* ---- Type ---- */ --font-display: 'Schibsted Grotesk', 'IBM Plex Sans', sans-serif; --font-body: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace; /* Type scale (rem) */ --text-xs: 0.72rem; /* 11.5px — meta, badges */ --text-sm: 0.815rem; /* 13px — table body, secondary */ --text-base: 0.9rem; /* 14.4px — body */ --text-md: 1.05rem; /* card titles */ --text-lg: 1.35rem; /* section heads */ --text-xl: 1.8rem; /* page titles */ --text-2xl: 2.6rem; /* hero numerals */ /* ---- Space (4px base) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-14: 56px; /* ---- Shape & depth ---- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --shadow-hairline: 0 0 0 1px var(--rule); --shadow-soft: 0 1px 2px rgba(27, 36, 32, 0.05), 0 8px 24px -12px rgba(27, 36, 32, 0.12); --shadow-lift: 0 2px 4px rgba(27, 36, 32, 0.06), 0 16px 40px -16px rgba(27, 36, 32, 0.22); /* ---- Motion ---- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --t-fast: 140ms var(--ease-out); --t-normal: 260ms var(--ease-out); /* ---- Layout ---- */ --sidebar-w: 236px; --content-max: 1320px; } /* ---- Surface accents: one identity per portal ---- */ body[data-surface="admin"] { --accent: #4c43ae; /* iris — platform governance */ --accent-strong: #3b3391; --accent-tint: #e9e7f6; --accent-glow: rgba(76, 67, 174, 0.16); } body[data-surface="clinical"] { --accent: #0d6e63; /* instrument teal — care delivery */ --accent-strong: #0a574e; --accent-tint: #e3efec; --accent-glow: rgba(13, 110, 99, 0.16); } body[data-surface="patient"] { --accent: #2fbd8b; /* vital mint on dark glass */ --accent-strong: #23996f; --accent-tint: rgba(47, 189, 139, 0.14); --accent-glow: rgba(47, 189, 139, 0.28); } /* ---- Reset ---- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; } body { background: var(--canvas); color: var(--ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.55; -webkit-font-smoothing: antialiased; letter-spacing: 0.001em; } h1, h2, h3, h4, .display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.022em; line-height: 1.15; color: var(--ink); } /* Telemetry numerals: always mono, always tabular */ .num, .mono, td.num, .stat-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } a { color: var(--accent-strong); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } ::selection { background: var(--accent); color: #ffffff; } /* Keyboard focus: always visible, never removed */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* Scrollbars, quiet */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 6px; border: 2px solid var(--canvas); } ::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }