/* css/tokens.css — design tokens + reset * Variables, color palette, typography. Loaded first; everything below depends on it. */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;} /* Tell the browser this app is light-themed so native controls (scrollbars, * date pickers, autofill buttons) render in light mode. */ :root{color-scheme:light;} :root{ --navy:#1f1b16;--navy-mid:#4a4036;--navy-deep:#17130f;--navy-light:#f1ded4; --blue:#c2553a;--blue-soft:#f1ded4; --teal:#1a8c7a;--teal-soft:#d4f0eb; --amber:#b06c10;--amber-soft:#fdefd8; --green:#1f7a3e;--green-soft:#dff2e7; --gray-50:#faf4e8;--gray-100:#f4ecdd;--gray-200:#e6dcc7;--gray-300:#cdbfa7;--gray-400:#a89782;--gray-500:#7a6d5c; --text:#1f1b16;--text-muted:#7a6d5c;--text-faint:#a89782; --border:rgba(230,220,199,0.72);--border-md:#e6dcc7; --surface:#faf4e8;--bg:#f4ecdd; --radius:7px;--radius-lg:11px; /* Polish layer — shared shadow, ring, and motion tokens (additive, no overrides) */ --shadow-card:0 1px 0 rgba(255,255,255,0.6) inset,0 1px 2px rgba(15,29,48,0.04),0 8px 18px -10px rgba(15,29,48,0.10); --shadow-card-hover:0 1px 0 rgba(255,255,255,0.6) inset,0 2px 4px rgba(15,29,48,0.06),0 14px 26px -12px rgba(15,29,48,0.14); --shadow-soft:0 1px 2px rgba(15,29,48,0.05),0 4px 12px -6px rgba(15,29,48,0.08); --ring-focus:0 0 0 3px rgba(194,85,58,0.20); --ease:cubic-bezier(.22,.61,.36,1); /* Consistent transition timings for orchestration */ --t-fast:0.13s; --t-mid:0.18s; --t-slow:0.32s; /* Iris signature decoration — tunable via these custom properties */ --iris-blue:rgba(194,85,58,0.06); --iris-teal:rgba(31,122,62,0.06); --iris-amber:rgba(176,108,16,0.06); --iris-glow:radial-gradient(circle at 50% 50%,rgba(15,29,48,0.06) 0%,rgba(15,29,48,0) 70%), conic-gradient(from 0deg,var(--iris-blue),var(--iris-teal),var(--iris-amber),var(--iris-blue)); --font:'Geist',system-ui,sans-serif; --mono:'Geist Mono',ui-monospace,monospace; --display:'Newsreader',Georgia,serif; --os-logo-font:'Newsreader',Georgia,serif; --os-logo-letter-spacing:-0.02em; --os-logo-primary-weight:600; --os-logo-secondary-weight:500; --os-logo-eye-stroke:0.9286; --os-logo-mark:#1f1b16; --os-logo-mark-cutout:#f4ecdd; --os-logo-word-primary:#c2553a; --os-logo-word-secondary:#6f6255; /* Semantic exam-cell token palette (D-colors): black = authoritative coded * finding, yellow = provisional alias (click to disambiguate), orange = * grade/modifier/measurement, gray = unrecognized (default text) + ghost. */ --exam-token-grade:var(--amber); --exam-token-finding:var(--text); --exam-token-alias:#a08206; --exam-token-ghost:var(--text-faint); /* Sidebar palette — cool slate */ --sb-bg:#1e2a35;--sb-mid:#263545;--sb-border:rgba(150,190,220,0.12); --sb-text:rgba(225,235,245,0.92);--sb-text-faint:rgba(170,195,220,0.55); --sb-title:rgba(255,255,255,0.88);--sb-btn-bg:rgba(150,190,230,0.1); --sb-btn-text:rgba(170,200,230,0.65);--sb-btn-border:rgba(150,190,220,0.2); --sb-inp-bg:rgba(255,255,255,0.08);--sb-inp-border:rgba(150,190,220,0.22); /* ============================================================ * OphthoScribe design-system blueprint tokens * * Source: claude.ai/design bundle JMXAOcBVGbdZsS6rz0xI8w * project/dist/ophthoscribe-tokens.css * project/ui_kits/ophthoscribe-app/app.css * the archived design preview (comp 39) * * Color values are authored in universal-colour-contract.css (the * 13-input palette). This block adds the type scale, radii, pip * palette, shadow recipes, and motion tokens that the blueprint * relies on. Everything below is consumed by ophthoscribe-encounter.css. * ============================================================ */ /* Type scale */ --t-2xs: 9px; --t-xs: 10.5px; --t-sm: 11.5px; --t-base: 13px; --t-md: 15px; --t-lg: 18px; --t-xl: 23px; --t-2xl: 32px; --t-3xl: 44px; --tracking-display: -0.025em; --tracking-ui: 0.01em; --tracking-eyebrow: 0.1em; /* Radii */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px; /* Widget pip palette — per-widget identity dots */ --pip-anterior: #81C4B0; --pip-posterior: #B09FE8; --pip-investig: #7AB8E8; --pip-addon: #E89A7A; /* Shadow recipes (blueprint) */ --os-shadow-paper: 0 1px 0 rgba(255,255,255,0.5) inset, 0 1px 2px rgba(31,27,22,0.04), 0 20px 40px -28px rgba(31,27,22,0.18); --os-shadow-card-hover: 0 1px 0 rgba(255,255,255,0.5) inset, 0 2px 4px rgba(31,27,22,0.06), 0 18px 32px -18px rgba(31,27,22,0.20); --os-shadow-soft: 0 1px 2px rgba(31,27,22,0.04), 0 14px 28px -22px rgba(31,27,22,0.16); --os-ring-focus: 0 0 0 3px rgba(194,85,58,0.20); /* ============================================================ * Widget contract — canonical encounter widget anatomy. * * Every encounter widget is a 3-part card: header (pip + title + * action buttons), body (scrollable content), footer (always * contains the directory search bar where one exists). * * These tokens describe the contract; ophthoscribe-encounter.css * applies them to .card[data-widget-card] uniformly across every * encounter tab. * * Source: claude.ai/design bundle JMXAOcBVGbdZsS6rz0xI8w * ophthoscribe-encounter.css (.w / .w-hdr / .w-body / .w-foot) * ============================================================ */ /* Shell */ --widget-bg: var(--surface); --widget-border: color-mix(in srgb, var(--ink) 8%, transparent); --widget-border-hover: color-mix(in srgb, var(--ink) 12%, transparent); --widget-radius: var(--r-md); --widget-shadow: var(--os-shadow-soft); --widget-shadow-hover: var(--os-shadow-card-hover); /* Header band — same warm-tint as the top banner so chrome reads as one * coherent surface. Sourced from --os-enc-banner-bg (single source of * truth for the banner color, declared above). */ --widget-header-bg: var(--os-enc-banner-bg); --widget-header-border: color-mix(in srgb, var(--ink) 8%, transparent); --widget-header-pad: 12px 16px; --widget-header-min-h: 46px; --widget-header-gap: 10px; /* Pip dot */ --widget-pip-size: 8px; --widget-pip-ring: 0 0 0 2px rgba(255,255,255,0.65), 0 1px 3px rgba(15,29,48,0.18); /* Title typography */ --widget-title-font: var(--mono); --widget-title-size: 11px; --widget-title-weight: 600; --widget-title-tracking: var(--tracking-eyebrow); --widget-title-color: var(--ink); /* Mini action buttons (Download / Add / N/A) */ --widget-mini-h: 24px; --widget-mini-min-w: 26px; --widget-mini-radius: 7px; --widget-mini-border: color-mix(in srgb, var(--ink) 14%, transparent); --widget-mini-bg: rgba(255,255,255,0.72); --widget-mini-text: var(--muted); --widget-mini-active-bg: var(--ink); --widget-mini-active-text: var(--paper); /* Body */ --widget-body-bg: var(--surface); --widget-body-pad: 14px 16px; --widget-body-pad-bottom-with-footer: calc(var(--widget-footer-min-h, 46px) + 14px); /* Footer band — always houses the directory search bar. Matches the * header (and the top banner) so the widget reads as a paper-bordered * surface clipped between two warm bands. */ --widget-footer-bg: var(--os-enc-banner-bg); --widget-footer-border: color-mix(in srgb, var(--ink) 8%, transparent); --widget-footer-pad: 8px 12px; --widget-footer-min-h: 46px; /* Footer search input */ --widget-search-bg: var(--surface); --widget-search-border: color-mix(in srgb, var(--ink) 14%, transparent); --widget-search-radius: var(--r-sm); --widget-search-height: 30px; --widget-search-pad: 6px 10px; --widget-search-font-size: var(--t-base); --widget-search-focus-border: var(--accent); --widget-search-focus-ring: var(--os-ring-focus); /* ============================================================ * Encounter shell tokens. * Display-only values for the SMART-on-FHIR encounter wrapper: * patient banner, encounter tabs, and page canvas. They must not * imply changes to FHIR extraction, encounter mapping, or write-back * behavior. * * These derive from the blueprint palette above so the inline