/* ============================================================================ themes.css โ€” SEMANTIC tokens. These are the ONLY colour tokens components use. Values swap per theme via [data-theme] on . See STYLING.md ยง4. ============================================================================ */ :root, [data-theme="dark"] { --sc-bg: var(--c-navy-950); --sc-surface: var(--c-navy-800); --sc-surface-2: var(--c-navy-900); --sc-bar: var(--c-navy-850); --sc-border: var(--c-navy-700); --sc-text: var(--c-ink-100); --sc-text-muted: var(--c-ink-300); --sc-text-onbar: var(--c-ink-050); --sc-accent: var(--c-blue-500); --sc-accent-hover: var(--c-blue-600); --sc-accent-strong: var(--c-blue-700); --sc-accent-soft: var(--c-blue-300); --sc-focus-ring: rgba(59, 130, 246, .35); --sc-on-accent: #ffffff; /* Secondary accent โ€” amber/orange (reserved) */ --sc-accent-2: var(--c-amber-500); --sc-accent-2-strong: var(--c-orange-500); --sc-accent-2-soft: var(--c-amber-400); --sc-warning: var(--c-warn-dark); --sc-info: var(--c-info-dark); --sc-success: var(--c-ok-dark); --sc-danger: var(--c-danger-dark); --sc-overlay: rgba(0, 0, 0, .6); --sc-shadow: rgba(0, 0, 0, .45); } [data-theme="light"] { --sc-bg: var(--c-paper-50); --sc-surface: var(--c-white); --sc-surface-2: var(--c-paper-100); --sc-bar: var(--c-paper-100); --sc-border: var(--c-paper-200); --sc-text: var(--c-slate-900); --sc-text-muted: var(--c-slate-500); --sc-text-onbar: var(--c-slate-900); --sc-accent: var(--c-blue-500); --sc-accent-hover: var(--c-blue-600); --sc-accent-strong: var(--c-blue-700); --sc-accent-soft: var(--c-blue-300); --sc-focus-ring: rgba(59, 130, 246, .25); --sc-on-accent: #ffffff; --sc-accent-2: var(--c-amber-600); --sc-accent-2-strong: var(--c-orange-600); --sc-accent-2-soft: var(--c-amber-500); --sc-warning: var(--c-warn-light); --sc-info: var(--c-info-light); --sc-success: var(--c-ok-light); --sc-danger: var(--c-danger-light); --sc-overlay: rgba(0, 0, 0, .35); --sc-shadow: rgba(0, 0, 0, .15); } /* Content-type marker colours โ€” constant across themes (per the mockup designs) */ :root { --sc-images: var(--c-green-500); --sc-dig: var(--c-red-500); --sc-theory: var(--c-purple-500); }