/* Instructed Intelligence — shared app design tokens * Source of truth for the tool-suite UI palette. Sourced from brand/design-brief.md * (single deep-teal accent, cool slate neutrals with a faint blue bias, near-black * grounds, gold as a sparing tertiary). Reference implementation: Cornerstone (web/). * * Adopt in a tool: import this file, then style components through var(--token) — * never hard-code a hex. Light/dark flips automatically; the viewer's toggle stamps * data-theme on and wins over the OS preference. Pair with a no-flash inline * script that applies localStorage.theme before first paint. */ :root { color-scheme: light; --ground: #f4f6f7; /* app background — cool off-white */ --surface: #ffffff; /* cards, bars, inputs */ --surface-2: #eef2f3; /* subtle fills, hover grounds */ --ink: #101620; /* primary text — near-black slate */ --ink-soft: #33404e; /* secondary text */ --muted: #586674; /* muted text, labels */ --faint: #8592a0; /* faint text, placeholders */ --line: #dde4e8; /* hairlines */ --line-strong: #c4ced4; /* stronger borders, inputs */ --primary: #0e8c86; /* THE accent — considered deep teal */ --primary-hover: #0a6763; --primary-tint: #e2f0ef; /* active nav, focus ring, avatar */ --link: #0b7a74; --on-primary: #ffffff; /* text/icon on a primary fill */ /* semantic state — muted, professional, separate from the accent */ --ok: #2f7d5b; --ok-tint: #e7f1ec; --warn: #9a6a18; --warn-tint: #f4ecd9; /* brand gold */ --restrict: #a2413f; --restrict-tint: #f5e7e6; /* entity/type indicators — one restrained set */ --t-rule: #9a6a18; --t-decision: #4a5578; --t-process: #0e8c86; --t-concept: #2f7d5b; --t-reference: #7a4f68; --t-document: #586674; --shadow: 0 1px 2px rgba(12,15,20,.06), 0 3px 6px -2px rgba(12,15,20,.05), 0 10px 22px -10px rgba(12,15,20,.10); --shadow-lift: 0 2px 4px rgba(12,15,20,.06), 0 6px 12px -4px rgba(12,15,20,.08), 0 16px 32px -12px rgba(12,15,20,.16); --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --ground: #0c0f14; --surface: #151a21; --surface-2: #1b222c; --ink: #f4f6f7; --ink-soft: #c4ced4; --muted: #96a2b0; --faint: #68727f; --line: #232c37; --line-strong: #33404e; --primary: #37b6ae; --primary-hover: #59c9c1; --primary-tint: #12282a; --link: #59c9c1; --on-primary: #0c0f14; --ok: #6fae8a; --ok-tint: #142620; --warn: #d6a94e; --warn-tint: #2a2113; --restrict: #d98684; --restrict-tint: #2c1817; --t-rule: #d6a94e; --t-decision: #98a0cc; --t-process: #37b6ae; --t-concept: #6fae8a; --t-reference: #c495b0; --t-document: #96a2b0; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 20px -10px rgba(0,0,0,.5); --shadow-lift: 0 2px 6px rgba(0,0,0,.5), 0 16px 32px -14px rgba(0,0,0,.6); } } /* viewer/user toggle wins over the OS preference, both directions */ :root[data-theme="light"] { color-scheme: light; --ground: #f4f6f7; --surface: #fff; --surface-2: #eef2f3; --ink: #101620; --ink-soft: #33404e; --muted: #586674; --faint: #8592a0; --line: #dde4e8; --line-strong: #c4ced4; --primary: #0e8c86; --primary-hover: #0a6763; --primary-tint: #e2f0ef; --link: #0b7a74; --on-primary: #fff; --ok: #2f7d5b; --ok-tint: #e7f1ec; --warn: #9a6a18; --warn-tint: #f4ecd9; --restrict: #a2413f; --restrict-tint: #f5e7e6; --t-rule: #9a6a18; --t-decision: #4a5578; --t-process: #0e8c86; --t-concept: #2f7d5b; --t-reference: #7a4f68; --t-document: #586674; --shadow: 0 1px 2px rgba(12,15,20,.06),0 3px 6px -2px rgba(12,15,20,.05),0 10px 22px -10px rgba(12,15,20,.10); --shadow-lift: 0 2px 4px rgba(12,15,20,.06),0 6px 12px -4px rgba(12,15,20,.08),0 16px 32px -12px rgba(12,15,20,.16); } :root[data-theme="dark"] { color-scheme: dark; --ground: #0c0f14; --surface: #151a21; --surface-2: #1b222c; --ink: #f4f6f7; --ink-soft: #c4ced4; --muted: #96a2b0; --faint: #68727f; --line: #232c37; --line-strong: #33404e; --primary: #37b6ae; --primary-hover: #59c9c1; --primary-tint: #12282a; --link: #59c9c1; --on-primary: #0c0f14; --ok: #6fae8a; --ok-tint: #142620; --warn: #d6a94e; --warn-tint: #2a2113; --restrict: #d98684; --restrict-tint: #2c1817; --t-rule: #d6a94e; --t-decision: #98a0cc; --t-process: #37b6ae; --t-concept: #6fae8a; --t-reference: #c495b0; --t-document: #96a2b0; --shadow: 0 1px 2px rgba(0,0,0,.4),0 8px 20px -10px rgba(0,0,0,.5); --shadow-lift: 0 2px 6px rgba(0,0,0,.5),0 16px 32px -14px rgba(0,0,0,.6); }