/* Mold Studio — shared black & white theme (light / dark) */ :root { color-scheme: light; --bg-primary: #FFFFFF; --bg-gradient-end: #F5F5F5; --bg-panel: #FFFFFF; --bg-card: #FFFFFF; --bg-card-hover: #F5F5F5; --bg-muted: #F0F0F0; --border-color: #E5E5E5; --border-hover: #C4C4C4; --text-primary: #0A0A0A; --text-secondary: #2E2E2E; --text-tertiary: #525252; --accent: #0A0A0A; --accent-hover: #262626; --accent-soft: rgba(10, 10, 10, 0.08); --accent-contrast: #FFFFFF; --success: #0A0A0A; --error: #0A0A0A; --shadow: rgba(0, 0, 0, 0.12); --radius: 12px; --radius-sm: 8px; --ease: cubic-bezier(0.4, 0, 0.2, 1); --transition: 0.2s var(--ease); --viewer-chrome: rgba(255, 255, 255, 0.96); --female: #00FFBB; --male: #FF2D55; --new-badge-bg: #0A0A0A; --new-badge-fg: #FFFFFF; --input-bg: #FFFFFF; --viewer-bg: #F5F5F5; --soft-fill: color-mix(in srgb, var(--text-primary) 6%, transparent); --soft-fill-strong: color-mix(in srgb, var(--text-primary) 12%, transparent); --soft-border: color-mix(in srgb, var(--text-primary) 16%, transparent); --soft-border-strong: color-mix(in srgb, var(--text-primary) 28%, transparent); /* analytics aliases */ --bg: var(--bg-muted); --surface: var(--bg-panel); --border: var(--border-color); --text: var(--text-primary); --text-muted: var(--text-tertiary); /* lab aliases */ --paper: var(--bg-primary); --paper-2: var(--bg-muted); --ink: var(--text-primary); --ink-60: color-mix(in srgb, var(--text-primary) 60%, transparent); --ink-40: color-mix(in srgb, var(--text-primary) 40%, transparent); --line: color-mix(in srgb, var(--text-primary) 85%, transparent); --hair: color-mix(in srgb, var(--text-primary) 16%, transparent); --pass: var(--text-primary); --fail: var(--text-primary); } [data-theme="dark"] { color-scheme: dark; --bg-primary: #0A0A0A; --bg-gradient-end: #111111; --bg-panel: #111111; --bg-card: #141414; --bg-card-hover: #1A1A1A; --bg-muted: #171717; --border-color: #2A2A2A; --border-hover: #404040; --text-primary: #FAFAFA; --text-secondary: #E5E5E5; --text-tertiary: #A3A3A3; --accent: #FAFAFA; --accent-hover: #E5E5E5; --accent-soft: rgba(250, 250, 250, 0.12); --accent-contrast: #0A0A0A; --success: #FAFAFA; --error: #FAFAFA; --shadow: rgba(0, 0, 0, 0.55); --viewer-chrome: rgba(17, 17, 17, 0.96); --female: #00FFBB; --male: #FF2D55; --new-badge-bg: #FAFAFA; --new-badge-fg: #0A0A0A; --input-bg: #1A1A1A; --viewer-bg: #0A0A0A; --soft-fill: color-mix(in srgb, var(--text-primary) 8%, transparent); --soft-fill-strong: color-mix(in srgb, var(--text-primary) 14%, transparent); --soft-border: color-mix(in srgb, var(--text-primary) 22%, transparent); --soft-border-strong: color-mix(in srgb, var(--text-primary) 36%, transparent); } /* Early theme boot: set data-theme on before paint via inline script on each page */