/* MedicalTV Enterprise Design Tokens - Drop-in token layer for consistent enterprise UI across the whole app - Dark mode via [data-theme="dark"] on (or prefers-color-scheme fallback) */ :root{ /* Brand */ --brand-1: #0ea5e9; /* primary */ --brand-2: #22c55e; /* accent */ --brand-3: #a855f7; /* optional */ /* Neutrals */ --bg: #0b1220; --surface-1: #0f1a2d; --surface-2: #14223b; --surface-3: #1a2b49; --border: rgba(255,255,255,.10); --text: rgba(255,255,255,.92); --text-2: rgba(255,255,255,.70); --text-3: rgba(255,255,255,.55); /* Shadows */ --shadow-1: 0 8px 24px rgba(0,0,0,.35); --shadow-2: 0 18px 48px rgba(0,0,0,.45); /* Radii */ --r-sm: 12px; --r-md: 16px; --r-lg: 22px; /* Spacing */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; /* Type */ --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --fs-0: 12px; --fs-1: 14px; --fs-2: 16px; --fs-3: 18px; --fs-4: 22px; --fs-5: 28px; --fs-6: 36px; --fs-7: 44px; --lh-tight: 1.2; --lh: 1.5; --lh-loose: 1.7; /* Focus */ --focus: 0 0 0 3px rgba(14,165,233,.35); --focus-2: 0 0 0 3px rgba(34,197,94,.30); /* Layout */ --container: 1160px; --nav-h: 64px; } html[data-theme="light"]{ --bg: #f6f8fc; --surface-1: #ffffff; --surface-2: #f2f5fb; --surface-3: #e9effa; --border: rgba(2,6,23,.10); --text: rgba(2,6,23,.92); --text-2: rgba(2,6,23,.70); --text-3: rgba(2,6,23,.55); --shadow-1: 0 8px 24px rgba(2,6,23,.10); --shadow-2: 0 18px 48px rgba(2,6,23,.14); } @media (prefers-color-scheme: light){ html:not([data-theme]){ --bg: #f6f8fc; --surface-1: #ffffff; --surface-2: #f2f5fb; --surface-3: #e9effa; --border: rgba(2,6,23,.10); --text: rgba(2,6,23,.92); --text-2: rgba(2,6,23,.70); --text-3: rgba(2,6,23,.55); --shadow-1: 0 8px 24px rgba(2,6,23,.10); --shadow-2: 0 18px 48px rgba(2,6,23,.14); } }