/* * GENERATED FILE — do not edit. * Source: design/tokens/tokens.json * Regenerate: dotnet run --project backend/tools/ePMR.TokenGen * * Both themes are first-class. Every token has a value in each — none inherits * by accident, because a token defined only in light silently breaks dark mode. */ :root { /* brand */ --brand-navy-900: #06152B; --brand-navy-800: #0C2340; --brand-navy-700: #123252; --brand-blue-700: #227388; --brand-teal-600: #1E9AAB; --brand-teal-500: #29ABB8; --brand-teal-400: #4FC3CC; --brand-green-600: #3FA37D; --brand-green-500: #4FB98D; --brand-green-400: #66C293; --brand-amber-600: #B45309; /* geometry */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 24px; --radius-pill: 999px; --border-width: 1px; /* typography */ --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Sora', 'Inter', sans-serif; --font-body-arabic: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif; --font-display-arabic: 'Cairo', 'IBM Plex Sans Arabic', sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --line-height-latin: 1.5; --line-height-arabic: 1.9; /* motion */ --ease: cubic-bezier(.4,0,.2,1); --ease-out: cubic-bezier(.16,1,.3,1); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 400ms; --gate-check-stagger: 50ms; --hold-to-confirm: 600ms; /* Density: ward is the default. Add .density-bench to for pharmacy. */ --screen-padding: 20px; --card-padding: 20px; --card-gap: 16px; --section-gap: 32px; --row-height: 56px; --touch-target: 56px; --font-size-body: 17px; --font-size-label: 14px; --font-size-heading: 22px; --font-size-display: 32px; } .density-bench { --screen-padding: 16px; --card-padding: 16px; --card-gap: 12px; --section-gap: 28px; --row-height: 44px; --touch-target: 44px; --font-size-body: 15px; --font-size-label: 13px; --font-size-heading: 20px; --font-size-display: 28px; } /* Light theme — the default, and what an unset data-bs-theme resolves to. */ :root, [data-bs-theme="light"] { /* surface */ --bg: #F7FAFC; --bg-tint: #EDF4F7; --surface: #FFFFFF; --surface-2: #F3F7FA; --border: rgba(12,35,64,.10); --border-2: rgba(12,35,64,.18); /* text */ --text: #1E3348; --text-2: #3D5266; --text-3: #64798F; --muted: #7C8FA3; --on-primary: #FFFFFF; /* semantic */ --primary: #1E9AAB; --primary-hover: #16808F; --primary-soft: #E6F5F8; --green-soft: #EAF7F1; --amber-soft: #FEF3E2; --danger-soft: #FDECEA; /* status */ --status-success: #2F7D60; --status-info: #146C7A; --status-warning: #8A3F07; --status-danger: #A8352E; --status-danger-emphasis: #A8352E; --status-neutral: #4B5E72; /* journey */ --journey-ordered: #6B7F94; --journey-prepared: #1C5F7F; --journey-in-transit: #17808F; --journey-at-ward: #128173; --journey-administered: #2F7D60; /* accent */ --accent-administration: #1E9AAB; --accent-pharmacy: #227388; --accent-floor-stock: #3FA37D; --accent-crash-cart: #B45309; --accent-returns: #6355B8; --accent-scanning: #1E9AAB; --accent-admin: #64798F; /* shadow */ --sm: 0 1px 3px rgba(12,35,64,.07), 0 1px 2px rgba(12,35,64,.04); --md: 0 8px 24px rgba(12,35,64,.08), 0 2px 6px rgba(12,35,64,.05); --lg: 0 18px 40px rgba(12,35,64,.11), 0 6px 14px rgba(12,35,64,.06); --xl: 0 32px 70px rgba(12,35,64,.16), 0 12px 24px rgba(12,35,64,.08); } /* Dark theme — bedside at 3am, and night shifts. */ [data-bs-theme="dark"] { /* surface */ --bg: #06152B; --bg-tint: #0A1D33; --surface: #0C2340; --surface-2: #123252; --border: rgba(255,255,255,.10); --border-2: rgba(255,255,255,.18); /* text */ --text: #E8EFF5; --text-2: #B9C8D6; --text-3: #93A6B8; --muted: #64798F; --on-primary: #06152B; /* semantic */ --primary: #29ABB8; --primary-hover: #4FC3CC; --primary-soft: rgba(41,171,184,.14); --green-soft: rgba(79,185,141,.14); --amber-soft: rgba(240,166,72,.14); --danger-soft: rgba(232,99,90,.14); /* status */ --status-success: #4FB98D; --status-info: #29ABB8; --status-warning: #F0A648; --status-danger: #E8635A; --status-danger-emphasis: #B5453D; --status-neutral: #93A6B8; /* journey */ --journey-ordered: #8496AA; --journey-prepared: #3E93AB; --journey-in-transit: #29ABB8; --journey-at-ward: #3FC6B0; --journey-administered: #66C293; /* accent */ --accent-administration: #29ABB8; --accent-pharmacy: #4A9DB8; --accent-floor-stock: #4FB98D; --accent-crash-cart: #F0A648; --accent-returns: #8C7EE8; --accent-scanning: #4FC3CC; --accent-admin: #93A6B8; /* shadow */ --sm: 0 1px 3px rgba(0,0,0,.40); --md: 0 8px 24px rgba(0,0,0,.45); --lg: 0 18px 40px rgba(0,0,0,.50); --xl: 0 32px 70px rgba(0,0,0,.55); }