/* ============================================================ Muse Bio — Modes One shared DNA, three audience skins. Apply via data-mode="clinical" | "cosmetic" | "donor" on a container (or ). Modes remap a curated set of semantic tokens — surfaces, accent emphasis, radius, and density — while every component keeps reading the same aliases. • clinical — investors & scientists. Rigorous, denser, cooler paper, restrained coral used as data highlight. • cosmetic — brands & formulators. Warmer cream surfaces, softer radius, generous rhythm. • donor — community. Warm blush surfaces, rounded, human. ============================================================ */ /* -------- CLINICAL -------- */ [data-mode="clinical"] { --surface-page: #FCFBFA; --surface-card: #FFFFFF; --surface-sunken: #F4F2F0; --surface-tint: #F3F4F4; --text-accent: var(--coral-700); --mode-accent: var(--coral-700); --mode-accent-100: var(--coral-50); --radius-card: var(--radius-sm); --density: 0.75; /* @kind other */ --border-default: var(--neutral-200); } /* -------- COSMETIC -------- */ [data-mode="cosmetic"] { --surface-page: #FBF4EF; --surface-card: #FFFCFA; --surface-sunken: #F4E9E0; --surface-tint: var(--coral-50); --text-accent: var(--coral-600); --mode-accent: var(--coral-600); --mode-accent-100: var(--coral-50); --radius-card: var(--radius-lg); --density: 1.15; /* @kind other */ } /* -------- DONOR -------- */ [data-mode="donor"] { --surface-page: #FDF3F0; --surface-card: #FFFBFA; --surface-sunken: #FBE6E2; --surface-tint: var(--coral-50); --text-accent: var(--coral-600); --mode-accent: var(--coral-600); --mode-accent-100: var(--coral-50); --radius-card: var(--radius-xl); --density: 1.1; /* @kind other */ } /* -------- Dark / inverse surface -------- */ [data-theme="dark"] { --surface-page: var(--ink); --surface-card: #221E24; --surface-sunken: #14111A; --text-primary: #F7F1ED; --text-secondary: rgba(247,241,237,0.72); --text-muted: rgba(247,241,237,0.5); --text-accent: var(--coral-400); --border-subtle: rgba(247,241,237,0.1); --border-default: rgba(247,241,237,0.16); --border-strong: rgba(247,241,237,0.28); }