/* Generated by tools/build-web-design.mjs from the pinned Claude artifact. Do not edit. */ /* Roles. tokens.css sets them per theme: light (White ground, Ink text) and dark (Night ground, On-Night text) on . The register scopes below override the theme: .clinical is always light, .on-night is always Night. */ :root{ --link-rule:var(--link-rule-light); } html[data-theme="dark"]{ --link-rule:var(--link-rule-dark); } /* A reading surface (essays, notes, non-clinical tools) follows the theme; the DR MCB spark and the glows stay dark-only. */ .reading{max-width:var(--measure)} /* Night · business surfaces */ .on-night{ --surface:var(--night); --surface-alt:var(--night-alt); --surface-card:var(--night-alt); --surface-card-alt:var(--night-alt); --fg:var(--on-night); --fg-2:var(--on-night); --fg-3:var(--on-night-3); --fg-display:var(--white); --fg-accent:var(--azure-light); --fg-label:var(--on-night-3); --fg-link:var(--azure-light); --fg-link-hover:var(--white); --action-bg-hover:var(--azure-light); --signal-bg:var(--acid); --signal-fg:var(--night); --rule:var(--rule-dark); --rule-strong:var(--rule-dark); --link-rule:var(--link-rule-dark); } /* Lavender · the light section inside a Night page */ .on-lavender{ --surface:var(--lavender-ground); --surface-alt:var(--white); --surface-card:var(--white); --surface-card-alt:var(--lavender-info); --fg:var(--ink); --fg-2:var(--ink-2); --fg-3:var(--ink-3); --fg-display:var(--purple); --fg-accent:var(--azure); --fg-label:var(--purple); --fg-link:var(--purple); --fg-link-hover:var(--azure); --rule:var(--rule-light); --rule-strong:var(--purple); --link-rule:var(--link-rule-purple); } /* Clinical Evidence Mode · practice web, patient education, documents. No glow, no Acid — the signal becomes Purple. One Night hero section per surface is allowed; everything below it returns to Lavender Ground. */ .clinical{ --surface:var(--lavender-ground); --surface-alt:var(--white); --surface-card:var(--white); --surface-card-alt:var(--lavender-info); --fg:var(--ink); --fg-2:var(--ink-2); --fg-3:var(--ink-3); --fg-display:var(--purple); --fg-accent:var(--azure); --fg-label:var(--purple); --fg-link:var(--purple); --fg-link-hover:var(--azure); --signal-bg:var(--purple); --signal-fg:var(--white); --rule:var(--rule-light); --rule-strong:var(--purple); --link-rule:var(--link-rule-purple); } :root, [data-theme="light"], .on-lavender, .clinical { --action-bg: var(--azure); --action-fg: var(--white); --action-bg-hover: var(--purple); --action-fg-hover: var(--white); --focus-ring: var(--azure); --fg-tint: var(--purple); } [data-theme="dark"], .on-night { --action-bg: var(--azure); --action-fg: var(--white); --action-bg-hover: var(--azure-light); --action-fg-hover: var(--night); --focus-ring: var(--azure-light); --fg-tint: var(--azure-light); } .on-lavender, .clinical { color-scheme: light; --action-bg: var(--azure); --action-fg: var(--white); --action-bg-hover: var(--purple); --action-fg-hover: var(--white); --fg-link-hover: var(--purple); --focus-ring: var(--purple); --signal-bg: var(--purple); --signal-fg: var(--white); --fg-tint: var(--purple); --fg-accent: var(--purple); } .on-night { color-scheme: dark; } .on-tint { --fg-link: var(--fg-tint); --fg-label: var(--fg-tint); --fg-accent: var(--fg-tint); --link-rule: 2px solid var(--fg-tint); }