/* ════════════════════════════════════════════════════════════════════ MEDBUS design tokens ──────────────────────────────────────────────────────────────────── The palette, type and elevation the MEDBUS platform is built on, written as plain custom properties so CodeIgniter views can use them without a build step. Two layers: 1. Primitives — the brand ramp, cool neutrals and semantic ramps. These never change between themes. 2. Surfaces — what a page actually paints with. These DO swap wholesale when `.dark` is on , which is why nothing below should reach past them to a raw --color-ink-900. Dark mode is driven by a class rather than the media query, so a choice the user made outranks whatever their OS is set to. ════════════════════════════════════════════════════════════════════ */ :root { /* ── Type ───────────────────────────────────────────────────── */ --mb-font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --mb-font-display: 'Figtree', var(--mb-font-sans); --mb-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ── MEDBUS blue ────────────────────────────────────────────── */ --color-brand-50: #eff6ff; --color-brand-100: #dbeafe; --color-brand-200: #bfdbfe; --color-brand-300: #93c5fd; --color-brand-400: #60a5fa; --color-brand-500: #3b8ef0; --color-brand-600: #1f7aec; --color-brand-700: #1662c4; --color-brand-800: #14509d; --color-brand-900: #14427e; --color-brand-950: #0d2a52; /* ── Cool neutrals ──────────────────────────────────────────── */ --color-ink-50: #f6f8fb; --color-ink-100: #eef1f6; --color-ink-200: #e3e8ef; --color-ink-300: #cdd5e0; --color-ink-400: #97a1b2; --color-ink-500: #667085; --color-ink-600: #4b5565; --color-ink-700: #364152; --color-ink-800: #202939; --color-ink-900: #121926; --color-ink-950: #10131e; /* ── Semantic, kept separate from the brand accent so a success message never has to borrow the brand's blue ──────────── */ --color-good-50: #e8f8f0; --color-good-100: #d1f2e1; --color-good-500: #16b364; --color-good-600: #10924f; --color-good-700: #0c7440; --color-warn-50: #fff6e6; --color-warn-100: #ffedcc; --color-warn-500: #f59e0b; --color-warn-600: #d18109; --color-warn-700: #a56508; --color-bad-50: #fdecef; --color-bad-100: #fbd9de; --color-bad-500: #ef4a5e; --color-bad-600: #d92d43; --color-bad-700: #b21f33; --color-bad-800: #8c1626; --color-info-50: #e8f1ff; --color-info-100: #d2e4ff; --color-info-500: #3b82f6; --color-info-600: #2569d8; --color-info-700: #1d54ad; /* ── Shape and elevation ────────────────────────────────────── */ --mb-radius-card: 0.875rem; --mb-radius-tile: 0.75rem; --mb-radius-pill: 9999px; --mb-shadow-card: 0 1px 2px rgb(25 29 43 / 0.04), 0 1px 3px rgb(25 29 43 / 0.03); --mb-shadow-raised: 0 4px 6px -2px rgb(25 29 43 / 0.05), 0 12px 24px -8px rgb(25 29 43 / 0.10); --mb-shadow-pop: 0 8px 12px -4px rgb(25 29 43 / 0.08), 0 24px 48px -12px rgb(25 29 43 / 0.18); /* ── Surfaces — light ───────────────────────────────────────── */ --surface-page: var(--color-ink-50); --surface-card: #ffffff; --surface-raised: #ffffff; --surface-sunken: var(--color-ink-100); --surface-hover: var(--color-ink-50); --border-subtle: var(--color-ink-200); --border-strong: var(--color-ink-300); --text-strong: var(--color-ink-900); --text-body: var(--color-ink-700); --text-muted: var(--color-ink-500); --text-faint: var(--color-ink-400); --tone-offer: #6d4df0; } .dark { --surface-page: #0e1119; --surface-card: #171b26; --surface-raised: #1e2331; --surface-sunken: #12151f; --surface-hover: #212636; --border-subtle: #272d3d; --border-strong: #343b4f; --text-strong: #eef0f7; --text-body: #c3c9db; --text-muted: #8c94ac; --text-faint: #6b7288; --tone-offer: #b3a4ff; } /* ── Icon tints ───────────────────────────────────────────────── A tinted square behind a line icon. Paired so the glyph always clears its own background in both themes. */ .tint-brand { background-color: var(--color-brand-100); color: var(--color-brand-600); } .tint-info { background-color: var(--color-info-100); color: var(--color-info-600); } .tint-good { background-color: var(--color-good-100); color: var(--color-good-600); } .tint-warn { background-color: var(--color-warn-100); color: var(--color-warn-600); } .tint-bad { background-color: var(--color-bad-100); color: var(--color-bad-600); } .tint-violet { background-color: #e7e2fe; color: #7c5cfc; } .tint-teal { background-color: #d3f2ee; color: #0d9488; } .dark .tint-brand { background-color: color-mix(in srgb, var(--color-brand-500) 18%, transparent); color: var(--color-brand-300); } .dark .tint-info { background-color: color-mix(in srgb, var(--color-info-500) 18%, transparent); color: #7cb0ff; } .dark .tint-good { background-color: color-mix(in srgb, var(--color-good-500) 20%, transparent); color: #6ee7a8; } .dark .tint-warn { background-color: color-mix(in srgb, var(--color-warn-500) 20%, transparent); color: #fcd34d; } .dark .tint-bad { background-color: color-mix(in srgb, var(--color-bad-500) 20%, transparent); color: #fda4af; } .dark .tint-violet { background-color: color-mix(in srgb, #7c5cfc 18%, transparent); color: #b3a4ff; } .dark .tint-teal { background-color: color-mix(in srgb, #0d9488 20%, transparent); color: #5eead4; }