/* ── Clinical token set ─────────────────────────────────────────────── Variant 1: Clinical — the canonical brand palette. Navy authority + warm-gold premium + a teal hint of innovation. Selected as the live brand system 2026-05-12 by client review. The rejected "modern" counterpoint was removed at the same time. Light = the default Clinical palette (:root and [data-theme="clinical"] resolve identically). Dark = a Clinical-compatible dark palette using the same navy + gold + teal hue family, luminance-tuned for AA contrast on dark grounds. The .theme-toggle button in the nav cycles between the two; localStorage('alderm-theme') persists the user's choice and prefers-color-scheme wins on first visit. ─────────────────────────────────────────────────────────────────────── */ :root, [data-theme="clinical"] { /* ── Colors — Clinical palette ───────────────────── Navy = primary. Warm gold = premium accent (UI accent only — AA 2.7 on white, restricted to dark surfaces / pills / underlines). Teal = clinical-tech accent for links and meta. */ --color-bg: #FFFFFF; --color-surface: #F7F8FA; --color-surface-raised: #FFFFFF; --color-border: #E2E6EC; --color-text-primary: #0E1B2D; --color-text-secondary: #4A5868; --color-text-muted: #8A95A3; --color-accent-navy: #1F3A5F; --color-accent-navy-dk: #16294A; --color-accent-gold: #C99B5C; --color-accent-gold-dk: #B0844A; --color-accent-gold-bg: rgba(201, 155, 92, 0.10); --color-accent-teal: #2C7B8A; --color-accent-teal-bg: rgba(44, 123, 138, 0.08); --color-header-bg: rgba(255, 255, 255, 0.94); --color-header-bg-scrolled: rgba(255, 255, 255, 1); --color-header-shadow: rgba(15, 27, 45, 0.08); --color-tint-navy: rgba(31, 58, 95, 0.10); --color-tint-gold: rgba(201, 155, 92, 0.12); --color-tint-teal: rgba(44, 123, 138, 0.10); --color-tint-ink: rgba(0, 0, 0, 0.05); /* Elevated card ground — tracks --color-surface-raised. */ --color-bg-elevated: #FFFFFF; color-scheme: light; /* ── Typography ───────────────────────────────────── */ --font-display: 'Plus Jakarta Sans', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-sans: 'Inter', system-ui, sans-serif; /* alias of --font-body */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1.0625rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* ── Spacing ──────────────────────────────────────── */ --section-padding-y: 6rem; --section-padding-y-sm: 4rem; --container-max-width: 72rem; --container-padding-x: 1.5rem; /* ── Border Radii ─────────────────────────────────── */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; /* ── Shadows ──────────────────────────────────────── */ --shadow-card: 0 1px 3px rgba(15, 27, 45, 0.08), 0 1px 2px rgba(15, 27, 45, 0.04); --shadow-elevated: 0 10px 25px rgba(15, 27, 45, 0.10), 0 4px 10px rgba(15, 27, 45, 0.06); /* ── Transitions ──────────────────────────────────── */ --transition-fast: 150ms ease; --transition-normal: 300ms ease; --transition-slow: 500ms ease; /* ── Z-Index Scale ────────────────────────────────── */ --z-base: 0; --z-card: 10; --z-sticky: 100; --z-nav: 200; --z-modal: 300; --z-toast: 400; --z-tooltip: 500; } /* ── [data-theme="dark"] — Clinical dark mode ──────────────────────── Same brand (navy + warm-gold + teal). Deep navy-black grounds, warm off-white ink, accent hues luminance-lifted to clear AA contrast on dark surfaces. Toggleable via the .theme-toggle button in the nav; persists in localStorage('alderm-theme'). First-visit default follows prefers-color-scheme. Token-only override per the dual-selector pattern — every component in styles.css reads var(--color-X) so the same component CSS reskins automatically. The dual selector pattern is documented at ~/brain/wiki/conventions/two-theme-static-site.md. ─────────────────────────────────────────────────────────────────── */ [data-theme="dark"] { /* Backgrounds — deep navy-black with subtle navy tint, not pure black. Surface raises step in luminance, not in hue. */ --color-bg: #0A1220; --color-surface: #111B2E; --color-surface-raised: #1A2640; --color-border: #2A3852; /* Ink — warm off-white. Full white is harsh on deep navy; F0F2F5 reads as clean white at scale while staying soft up close. */ --color-text-primary: #F0F2F5; --color-text-secondary: #B5BDC9; --color-text-muted: #7A8497; /* Brand accents — same hue family as light, luminance-shifted for dark grounds. The light-mode navy (#1F3A5F) is too dark to read as a CTA against #0A1220, so it lifts to #4A6FA5 (same hue, more light). Gold and teal lift similarly for AA. */ --color-accent-navy: #4A6FA5; --color-accent-navy-dk: #5E84BC; --color-accent-gold: #E0B673; --color-accent-gold-dk: #F0C685; --color-accent-gold-bg: rgba(224, 182, 115, 0.12); --color-accent-teal: #5BB8CC; --color-accent-teal-bg: rgba(91, 184, 204, 0.10); --color-header-bg: rgba(10, 18, 32, 0.94); --color-header-bg-scrolled: rgba(10, 18, 32, 1); --color-header-shadow: rgba(0, 0, 0, 0.4); --color-tint-navy: rgba(74, 111, 165, 0.20); --color-tint-gold: rgba(224, 182, 115, 0.14); --color-tint-teal: rgba(91, 184, 204, 0.12); --color-tint-ink: rgba(240, 242, 245, 0.06); /* Elevated card ground — tracks --color-surface-raised. */ --color-bg-elevated: #1A2640; /* Shadows lose contrast on dark — recolor and deepen. */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-elevated: 0 10px 25px rgba(0, 0, 0, 0.50), 0 4px 10px rgba(0, 0, 0, 0.30); color-scheme: dark; }