/* ============================================================================= TENSOR Med — Design Tokens ============================================================================= Single source of truth for every colour, size, spacing, and font decision across the application. Every `frontend/*.html` page imports this first and consumes custom properties rather than raw values. --------------------------------------------------------------------------- Rules: 1. No hex literals outside this file. Every colour comes from a token. 2. Typography scale is fixed — 11/12/13/14/16/20/24 px. No ad-hoc sizes. 3. Spacing is a 4 px grid. 4. The ring motif lives in `.ring` at the bottom of this file and consumes two PNG assets at 1× + 3× density. 5. Changes here propagate to every page automatically. No shims. --------------------------------------------------------------------------- See ring-preview.html for the motif walkthrough and components.html for the full component catalogue. ============================================================================= */ /* ─── Font loading ─────────────────────────────────────────────────────── */ /* IBM Plex Sans for UI/body; IBM Plex Mono for tabular numerics + code. Preconnect handled in the page so the import here does not block. */ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap"); /* ─── Tokens ───────────────────────────────────────────────────────────── */ :root { /* ====================================================================== BRAND ====================================================================== */ --logo-black: #000; /* Med-box on wordmark — always black */ --brand-blue: #1e4d8b; /* UI accent — primary buttons, links, focus */ --brand-blue-hover: #2a5fa5; /* hover / focus-in state for primary action */ --brand-blue-active: #163b6d; /* pressed state */ --brand-blue-tint: #e8eef7; /* light-blue chip / info-advisory bg */ --brand-blue-border: #c7d2e4; /* 1 px borders in brand-blue contexts */ /* Ring ink — matches the favicon exactly (warm dark). Not a brand UI colour; only used by `.ring`. */ --ring-ink: #2a1f15; /* ====================================================================== NEUTRAL SURFACES + TEXT Cool neutrals — NOT warm taupes. Aligns with clinical/medical-grade tone. Text colours all pass WCAG AA on white at ≥14 px. ====================================================================== */ --surface: #ffffff; /* page background */ --surface-alt: #f8fafc; /* muted panels / striped table rows */ --surface-sunken: #f1f5f9; /* pressed / disabled fill */ --border: #e5e7eb; /* default 1 px card / input border */ --border-strong: #cbd5e1; /* emphasised separators / focus borders */ --text-primary: #0a0f1a; /* headings, data values */ --text-secondary: #475569; /* body, labels */ --text-muted: #64748b; /* captions, metadata (min 14 px) */ --text-disabled: #94a3b8; /* placeholder, disabled */ --text-inverse: #ffffff; /* on dark / brand-blue backgrounds */ /* ====================================================================== ADVISORY SEVERITY Mirrors the Phase 0.4 taxonomy: urgent / strong / preference / info. Every advisory element (strip, chip, inline marker) picks one of these four groups; no other colour system is allowed for severity. ====================================================================== */ --adv-urgent-fg: #991b1b; /* deep red — urgent advisory */ --adv-urgent-bg: #fef2f2; --adv-urgent-border: #fecaca; --adv-strong-fg: #92400e; /* deep amber — strong advisory */ --adv-strong-bg: #fffbeb; --adv-strong-border: #fde68a; --adv-preference-fg: #1e4d8b; /* brand-blue — preference (alternative exists) */ --adv-preference-bg: #e8eef7; --adv-preference-border:#c7d2e4; --adv-info-fg: #475569; /* slate — informational */ --adv-info-bg: #f8fafc; --adv-info-border: #e5e7eb; /* ====================================================================== CLINICAL STATUS Status dots / chips on patient lists. Distinct from advisory severity because "patient is in remission" ≠ "there is an urgent advisory". ====================================================================== */ --status-remission: #0f766e; /* teal — patient at target */ --status-low-activity: #059669; /* green — LDA / LLDAS */ --status-moderate: #d97706; /* amber — moderate activity */ --status-high: #dc2626; /* red — high activity */ --status-unknown: #94a3b8; /* grey — no data */ /* ====================================================================== TYPOGRAPHY Plex Sans throughout; Plex Mono reserved for numerics (lab values, scores, timestamps, PMIDs) where monospaced alignment aids scanning. ====================================================================== */ --font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Type scale — rigid. 7 sizes, no freelancing. */ --text-xs: 11px; /* captions, chip labels */ --text-sm: 12px; /* metadata, table small */ --text-base: 13px; /* dense tables, data rows */ --text-body: 14px; /* prose body — minimum AA size */ --text-lg: 16px; /* card headers, emphasis */ --text-xl: 20px; /* section titles */ --text-2xl: 24px; /* page titles */ /* Line heights */ --lh-tight: 1.2; /* headings */ --lh-body: 1.5; /* body text */ --lh-dense: 1.35; /* tables */ /* Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Tabular-figures — enabled by default on numerics */ --ffs-tabular: "tnum", "lnum"; /* ====================================================================== SPACING Everything snaps to a 4 px grid. Naming = absolute px so it's self-describing (no "sm/md/lg" game of guessing). ====================================================================== */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; /* ====================================================================== RADII Two values: 4 px (chips, inputs) and 8 px (cards, modals). Zero for the wordmark Med-box and for alert-strip left accents. ====================================================================== */ --r-sm: 4px; --r-md: 8px; --r-none: 0; /* ====================================================================== SHADOWS — minimal. Three tiers. ====================================================================== */ --shadow-none: none; --shadow-sm: 0 1px 2px rgba(10, 15, 26, 0.05); --shadow-md: 0 2px 6px rgba(10, 15, 26, 0.06), 0 1px 2px rgba(10, 15, 26, 0.04); --shadow-lg: 0 8px 20px rgba(10, 15, 26, 0.08), 0 2px 4px rgba(10, 15, 26, 0.04); /* ====================================================================== FOCUS Every interactive element gets this on :focus-visible. Brand-blue 2 px outline with 2 px offset — highly visible, not noisy. ====================================================================== */ --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-blue); /* ====================================================================== MOTION ====================================================================== */ --motion-fast: 150ms cubic-bezier(0.2, 0, 0, 1); --motion-base: 220ms cubic-bezier(0.2, 0, 0, 1); --motion-slow: 320ms cubic-bezier(0.2, 0, 0, 1); /* ====================================================================== LAYOUT ====================================================================== */ --page-max-width: 1280px; --content-max-width: 1040px; --nav-height: 56px; } /* ─── Global base ──────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--surface); color: var(--text-primary); font-family: var(--font-family); font-size: var(--text-body); line-height: var(--lh-body); font-feature-settings: "ss01", "cv11"; /* Plex stylistic set + tab alternate */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } :focus { outline: none; } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); } /* Tabular numerics where it matters — lab values, dates, scores, money */ .num, code, kbd, samp { font-feature-settings: var(--ffs-tabular); font-variant-numeric: tabular-nums; } /* A scrollbar pass — not cosmetic, just reduces visual noise on Chromium */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--surface-alt); } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; border: 2px solid var(--surface-alt); } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ============================================================================= WORDMARK ============================================================================= TENSOR Med lockup. Black Med-box, sharp corners, tight padding. Ring NOT paired with this — the wordmark stands alone. ============================================================================= */ .wordmark { display: inline-flex; align-items: center; font-family: var(--font-family); font-weight: var(--fw-bold); letter-spacing: 0.04em; font-size: var(--text-xl); color: var(--text-primary); line-height: 1; user-select: none; } .wordmark-tensor { font-weight: var(--fw-bold); } .wordmark-box { background: var(--logo-black); color: var(--text-inverse); padding: 2px 5px; border-radius: var(--r-none); /* sharp edges */ margin-left: var(--s-1); font-weight: var(--fw-semibold); letter-spacing: 0.02em; } /* ============================================================================= RING MOTIF ============================================================================= The single ring component. Two variants (solid / outline), two modes (static / loading). Uses `image-set()` so browsers pick 1× or 3× based on display density. See ring-preview.html for the full walkthrough. ============================================================================= */ .ring { --ring-size: 24px; width: var(--ring-size); height: var(--ring-size); display: inline-block; vertical-align: middle; flex: 0 0 auto; /* Solid variant — warm off-white interior. Use on white backgrounds where nothing sits inside the ring. */ background: -webkit-image-set(url("ring.png") 1x, url("ring@3x.png") 3x) no-repeat center / contain; background: image-set(url("ring.png") 1x, url("ring@3x.png") 3x) no-repeat center / contain; } /* Outline variant — transparent interior. Use: * on coloured backgrounds (blue buttons, dark nav) * when content sits inside the ring (version badges, agent avatars) */ .ring[data-variant="outline"] { background: -webkit-image-set(url("ring-outline.png") 1x, url("ring-outline@3x.png") 3x) no-repeat center / contain; background: image-set(url("ring-outline.png") 1x, url("ring-outline@3x.png") 3x) no-repeat center / contain; } /* Recolour-to-white for ring-on-coloured-fill buttons. The ring's warm ink is black-ish; brightness(0) + invert(1) converts it to pure white while preserving shape + lobe character. */ .ring[data-tint="white"] { filter: brightness(0) invert(1); } /* Loading mode — whole ring rotates */ .ring[data-mode="loading"] { animation: ring-spin 1.2s linear infinite; } @keyframes ring-spin { to { transform: rotate(360deg); } } /* Empty-state fade */ .ring[data-mode="empty"] { opacity: 0.28; } @media (prefers-reduced-motion: reduce) { .ring[data-mode="loading"] { animation: ring-pulse 2s ease-in-out infinite; } @keyframes ring-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } }