/* ngNstruments design tokens — load via /assets/styles/theme.css */ :root { color-scheme: light; /* Brand palette: #111827 #6E8598 #A7B8CB #59BBEB #DCE6F0 */ --ng-brand-navy: #111827; --ng-brand-steel: #6e8598; --ng-brand-silver: #a7b8cb; --ng-brand-sky: #59bbeb; --ng-brand-ice: #dce6f0; --ng-bg: #f6f9fc; --ng-surface: #ffffff; --ng-surface-raised: #edf4fa; --ng-text: #111827; --ng-text-muted: #536779; --ng-border: #d6e1eb; --ng-primary: #08648c; --ng-primary-hover: #064e70; --ng-primary-text: #ffffff; --ng-focus: #087caf; --ng-success: #1a7651; --ng-warning: #91570a; --ng-error: #b42332; } /* Follow the OS preference until an explicit data-theme is set on . */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --ng-bg: #0c1420; --ng-surface: #111827; --ng-surface-raised: #1c2a39; --ng-text: #edf4fb; --ng-text-muted: #a7b8cb; --ng-border: #314558; --ng-primary: #59bbeb; --ng-primary-hover: #83d1f5; --ng-primary-text: #0b1722; --ng-focus: #83d1f5; --ng-success: #73d4ab; --ng-warning: #f6c37a; --ng-error: #ff99a2; } } :root[data-theme="dark"] { color-scheme: dark; --ng-bg: #0c1420; --ng-surface: #111827; --ng-surface-raised: #1c2a39; --ng-text: #edf4fb; --ng-text-muted: #a7b8cb; --ng-border: #314558; --ng-primary: #59bbeb; --ng-primary-hover: #83d1f5; --ng-primary-text: #0b1722; --ng-focus: #83d1f5; --ng-success: #73d4ab; --ng-warning: #f6c37a; --ng-error: #ff99a2; } :root[data-theme="light"] { color-scheme: light; } /* Optional semantic aliases for a hand-written CSS app. */ body { background: var(--ng-bg); color: var(--ng-text); } :focus-visible { outline: 2px solid var(--ng-focus); outline-offset: 3px; }