/* ========================================================================== OrthoAgent — Design Tokens ("Clinical Teal") -------------------------------------------------------------------------- Single source of truth for colour, spacing, type, radius, shadow and motion. NOTHING here selects or styles an element — these are only CSS custom properties on :root. Components (components.css) and pages consume them via var(--token). Change a value here → the whole UI follows. Why tokens first? It guarantees one consistent visual language across every page, and makes the traffic-light status system (green/amber/red) a single decision instead of scattered hex codes. ========================================================================== */ :root { /* --- Brand ------------------------------------------------------------- Teal identity: calm, clinical, distinct from the red/amber/green used for clinical *status* (so brand colour is never confused with a warning). */ --color-brand: #0d9488; /* teal-600 — primary actions, links, logo */ --color-brand-hover: #0f766e; /* teal-700 — hover/active */ --color-brand-weak: #ccfbf1; /* teal-100 — subtle brand fills/highlights */ --color-brand-contrast: #ffffff; /* text on a brand-coloured surface */ /* --- Neutral surfaces & text (light clinical base) --------------------- */ --color-bg: #f8fafc; /* slate-50 — app background */ --color-surface: #ffffff; /* cards, panels, tables */ --color-surface-alt: #f1f5f9; /* slate-100 — striped rows, subtle panels */ --color-border: #e2e8f0; /* slate-200 — hairlines, card borders */ --color-border-strong:#cbd5e1; /* slate-300 — inputs, dividers */ --color-text: #0f172a; /* slate-900 — primary text */ --color-text-muted: #64748b; /* slate-500 — secondary text, labels */ --color-text-faint: #94a3b8; /* slate-400 — placeholders, hints */ /* --- Viewer surface (dark) -------------------------------------------- X-rays read best on a dark background, mirroring real radiology stations. The case-page image viewer uses these regardless of the light app shell. */ --color-viewer-bg: #0b1220; /* near-black slate */ --color-viewer-panel: #111a2e; /* controls bar over the viewer */ --color-viewer-text: #e5e7eb; /* text/icons on the dark viewer */ --color-viewer-border:#1e293b; /* dividers on the dark viewer */ /* --- Traffic-light: clinical status semantics ------------------------- Each status colour ships as a trio: strong (text/border/icon), a soft surface (badge/row background) and an on-surface text colour that meets WCAG AA against that soft surface. Badges also carry a text label, never colour alone (accessibility). */ --color-safe: #16a34a; /* green-600 — COMPLETED / AMENDED / safe */ --color-safe-surface: #dcfce7; /* green-100 */ --color-safe-text: #166534; /* green-800 — AA on safe-surface */ --color-warn: #d97706; /* amber-600 — NEEDS_REVIEW / PENDING_SIGNOFF / AWAITING_IMAGE */ --color-warn-surface: #fef3c7; /* amber-100 */ --color-warn-text: #92400e; /* amber-800 — AA on warn-surface */ --color-danger: #dc2626; /* red-600 — FAILED / REJECTED_* / danger */ --color-danger-surface: #fee2e2; /* red-100 */ --color-danger-text: #991b1b; /* red-800 — AA on danger-surface */ --color-neutral: #64748b; /* slate-500 — RECEIVED (in-progress) / CANCELLED */ --color-neutral-surface: #e2e8f0; /* slate-200 */ --color-neutral-text: #334155; /* slate-700 — AA on neutral-surface */ --color-info: #0284c7; /* sky-600 — informational accents */ --color-info-surface: #e0f2fe; /* sky-100 */ --color-info-text: #075985; /* sky-800 */ /* --- Focus ring (accessibility: always visible for keyboard users) ----- */ --color-focus: #0d9488; --focus-ring: 0 0 0 3px rgba(13, 148, 136, 0.35); /* --- Density (Phase 9.1) ---------------------------------------------- Clinical staff work dense worklists; a patient reads a few calm cards. Components consume these instead of hard-coding vertical rhythm, so a role can breathe differently without a second stylesheet. */ --row-pad-y: var(--space-3); --section-gap: var(--space-4); --reading-max: var(--content-max); /* --- Typography -------------------------------------------------------- System font stack only — no external/web fonts (keeps us within the same-origin CSP and the no-build-step rule). */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", Menlo, Consolas, "Liberation Mono", monospace; --text-xs: 0.75rem; /* 12px — badges, captions */ --text-sm: 0.875rem; /* 14px — table body, secondary */ --text-base: 1rem; /* 16px — body */ --text-lg: 1.125rem; /* 18px — section titles */ --text-xl: 1.375rem; /* 22px — page titles */ --text-2xl: 1.75rem; /* 28px — stat numbers */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.25; --leading-normal: 1.5; /* --- Spacing scale (4px base) ------------------------------------------ */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-8: 3rem; /* 48px */ /* --- Radius ------------------------------------------------------------ */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; /* badges/chips */ /* --- Elevation --------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12); /* --- Layout metrics ---------------------------------------------------- */ --header-height: 56px; --content-max: 1200px; /* max readable width for the app shell */ /* --- Motion (respect prefers-reduced-motion in components) ------------- */ --transition-fast: 120ms ease; --transition-base: 200ms ease; /* --- Z-index scale ----------------------------------------------------- */ --z-header: 100; --z-overlay: 200; /* modals, dropdowns */ --z-toast: 300; } /* ========================================================================== Role identity (Phase 9.1) -------------------------------------------------------------------------- Ebrahim, reviewing the built system: "ما بتحس أي فرق بالتصميم بين كل ال roles" — admin, doctor, specialist and patient all looked identical, so you could not tell which system you were in. The fix is a token swap, not a second design system: `shell.js` (and the patient portal) stamp `data-role` on , and these blocks re-point the accent + density tokens. Every component already draws its accent from `--color-brand`, so the whole UI follows with ZERO component-level CSS. Hues are chosen to be mutually distinguishable, and none of them collide with the clinical traffic-light (green/amber/red) which always means status, never identity: doctor teal — the product's own identity; the primary clinical user specialist indigo — the reviewer's cockpit reads as a different workspace admin slate — deliberately unglamorous: you are in the machine room patient blue — calm and consumer-facing, roomier spacing ========================================================================== */ :root[data-role="specialist"] { --color-brand: #4f46e5; /* indigo-600 */ --color-brand-hover: #4338ca; /* indigo-700 */ --color-brand-weak: #e0e7ff; /* indigo-100 */ --color-focus: #4f46e5; --focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.35); } :root[data-role="admin"] { --color-brand: #475569; /* slate-600 */ --color-brand-hover: #334155; /* slate-700 */ --color-brand-weak: #e2e8f0; /* slate-200 */ --color-focus: #475569; --focus-ring: 0 0 0 3px rgba(71, 85, 105, 0.35); } :root[data-role="patient"] { --color-brand: #2563eb; /* blue-600 */ --color-brand-hover: #1d4ed8; /* blue-700 */ --color-brand-weak: #dbeafe; /* blue-100 */ --color-focus: #2563eb; --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.35); /* A patient is reading, not scanning a queue: more air, wider measure. */ --row-pad-y: var(--space-4); --section-gap: var(--space-5); --reading-max: 1040px; }