/* RatioForge — Color tokens. Light is the default (:root). Dark applies via [data-theme="dark"] or prefers-color-scheme. Accent teal is reserved for INTERACTIVE states only — never decorative fills. WCAG AA verified in both themes. */ :root { /* Base palette — light */ --bg: #F7F8FA; /* page background — ads live here */ --surface: #FFFFFF; /* tool card, FAQ, any raised panel */ --border: #E3E7EC; /* hairline dividers, input outlines */ --text: #16202C; /* primary text */ --muted: #5A6675; /* secondary text, labels, units */ --accent: #1F8A8A; /* teal — interactive only */ --accent-hover: #1A7575; /* pressed / hover darken */ --accent-weak: #E6F2F2; /* selected pill / focus tint fill */ /* Semantic aliases */ --page-bg: var(--bg); --surface-card: var(--surface); --border-default: var(--border); --border-strong: #CDD4DC; --text-primary: var(--text); --text-muted: var(--muted); --text-on-accent: #FFFFFF; --interactive: var(--accent); --interactive-hover: var(--accent-hover); --interactive-weak: var(--accent-weak); --focus-ring: var(--accent); /* Preview / technical-drawing surface */ --preview-fill: #EEF1F4; --preview-stroke: #1F8A8A; --preview-dim: #5A6675; color-scheme: light; } [data-theme="dark"] { --bg: #0E1419; --surface: #161E26; --border: #28333D; --text: #E8EDF2; --muted: #9AA7B4; --accent: #2BB3B3; --accent-hover: #3FC4C4; --accent-weak: #14333A; --border-strong: #3A4651; --text-on-accent: #06181A; --preview-fill: #1B242D; --preview-stroke: #2BB3B3; --preview-dim: #9AA7B4; color-scheme: dark; } /* OS-level auto dark: apply by setting data-theme="dark" on from the app (e.g. matchMedia('(prefers-color-scheme: dark)')). Kept out of the token CSS so every theme value lives under a single registerable scope. */