/* Design tokens. --accent is the per-clinic theming hook: on portal load the active clinic's secondary_color is injected via document.documentElement.style.setProperty('--accent', ...) Direction: cool monochrome chrome (zinc), accent used sparingly — primary actions, focus, selection, and the nav active rail. */ :root { /* brand / theme (overridden per clinic at runtime) */ --accent: #0e7490; --accent-contrast: #ffffff; --accent-weak: color-mix(in srgb, var(--accent) 8%, var(--surface)); --accent-line: color-mix(in srgb, var(--accent) 22%, var(--surface)); --accent-text: color-mix(in srgb, var(--accent) 78%, var(--text)); /* neutrals — cool zinc, not warm paper */ --bg: #f4f4f5; --surface: #ffffff; --surface-2: #fafafa; --surface-3: #f4f4f5; --border: #e4e4e7; --border-strong: #d4d4d8; --text: #18181b; --text-soft: #52525b; --text-faint: #a1a1aa; /* status — functional only; keep muted so chrome stays monochrome */ --ok: #15803d; --ok-bg: #f0fdf4; --ok-line: #bbf7d0; --warn: #a16207; --warn-bg: #fffbeb; --warn-line: #fde68a; --danger: #be123c; --danger-bg: #fff1f2; --danger-line: #fecdd3; --info: #1d4ed8; --info-bg: #eff6ff; --info-line: #bfdbfe; /* geometry — soft rounded, still crisp */ --radius-sm: 8px; --radius: 10px; --radius-lg: 14px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(24, 24, 27, .04); --shadow: 0 4px 16px -2px rgba(24, 24, 27, .08), 0 1px 3px rgba(24, 24, 27, .04); --shadow-lg: 0 24px 56px -16px rgba(24, 24, 27, .22); /* controls: one height for buttons, inputs and selects */ --ctl-h: 36px; --ctl-h-sm: 30px; --ring: 0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent); /* motion */ --ease: cubic-bezier(.22, .8, .32, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.34, 1.3, .64, 1); --t-fast: .14s; --t-med: .28s; --t-drawer: .4s; /* spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color-scheme: light; } /* ---------- dark mode ---------- Toggled by setting data-theme="dark" on (persisted in localStorage). --accent stays the per-clinic color; neutrals go near-black cool zinc. */ :root[data-theme="dark"] { --accent-weak: color-mix(in srgb, var(--accent) 16%, var(--surface)); --accent-line: color-mix(in srgb, var(--accent) 32%, var(--surface)); --accent-text: color-mix(in srgb, var(--accent) 55%, var(--text)); --bg: #09090b; --surface: #18181b; --surface-2: #1c1c1f; --surface-3: #27272a; --border: #27272a; --border-strong: #3f3f46; --text: #fafafa; --text-soft: #a1a1aa; --text-faint: #71717a; --ok: #4ade80; --ok-bg: #052e16; --ok-line: #166534; --warn: #fbbf24; --warn-bg: #1c1408; --warn-line: #854d0e; --danger: #fb7185; --danger-bg: #1f0a10; --danger-line: #9f1239; --info: #93c5fd; --info-bg: #0c1929; --info-line: #1e40af; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow: 0 4px 16px -2px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3); --shadow-lg: 0 20px 48px -12px rgba(0, 0, 0, .65); --ring: 0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb, var(--accent) 40%, transparent); color-scheme: dark; }