/* 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/). * * Register: a SOVEREIGN OPERATIONS CONSOLE, dark-first — sovereign, precise, engineered, * trustworthy. Cinematic depth (an atmospheric "dawn sky" ground + film grain), a glowing * accent, and notched HUD panels give it a futuristic instrument feel without breaking the * brand rules (IBM Plex, teal, ii mark, gold sparing, never consumer-AI). * * 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. The `--app-bg`/`--app-atmosphere` power the ground; * apply `--app-bg` to and drop a fixed `.app-atmosphere` layer behind content. * * The font tokens below name real IBM Plex, so the faces must be loaded — hence the import. * Both are generated; see brand/sync-brand-to-app.py. */ @import "./ii-fonts.css"; :root { color-scheme: light; --ground: #eef2f5; /* app background — cool off-white */ --ground-2: #e6ecf0; /* gradient depth stop */ --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); /* depth + atmosphere — light stays crisp, minimal glow */ --edge: inset 0 1px 0 rgba(255,255,255,.6); --glow: 0 0 0 3px var(--primary-tint); --hud: rgba(14,140,134,.35); --app-bg: radial-gradient(1100px 520px at 50% -8%, rgba(14,140,134,.05), transparent 60%), var(--ground); --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* DARK — the hero register: deep cool slate, dawn-sky atmosphere, glowing accent. Guarded with :not([data-theme="light"]) so an explicit light choice beats a dark OS. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --ground: #060a11; --ground-2: #0a1422; --surface: #0f1620; --surface-2: #161f2b; --ink: #eef2f6; --ink-soft: #b9c4d0; --muted: #7f8c9a; --faint: #5a6675; --line: #1d2733; --line-strong: #2b3745; --primary: #37b6ae; --primary-hover: #5bd3ca; --primary-tint: #0f2b2b; --link: #5bd3ca; --on-primary: #060a11; --ok: #6fae8a; --ok-tint: #122420; --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: #8f9bab; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 26px -12px rgba(0,0,0,.65); --shadow-lift: 0 2px 6px rgba(0,0,0,.6), 0 22px 44px -18px rgba(0,0,0,.75); --edge: inset 0 1px 0 rgba(255,255,255,.045); --glow: 0 0 0 3px rgba(55,182,174,.20), 0 0 22px -4px rgba(55,182,174,.30); --hud: rgba(55,182,174,.45); --app-bg: radial-gradient(1500px 780px at 50% 118%, rgba(55,182,174,.11), transparent 56%), radial-gradient(1150px 660px at 80% -12%, rgba(96,116,158,.13), transparent 56%), radial-gradient(760px 460px at 6% 6%, rgba(122,88,112,.06), transparent 60%), linear-gradient(180deg, #0a1220 0%, #070c15 46%, #04070d 100%); } } /* viewer/user toggle wins over the OS preference, both directions */ :root[data-theme="light"] { color-scheme: light; --ground: #eef2f5; --ground-2: #e6ecf0; --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); --edge: inset 0 1px 0 rgba(255,255,255,.6); --glow: 0 0 0 3px var(--primary-tint); --hud: rgba(14,140,134,.35); --app-bg: radial-gradient(1100px 520px at 50% -8%, rgba(14,140,134,.05), transparent 60%), var(--ground); } :root[data-theme="dark"] { color-scheme: dark; --ground: #060a11; --ground-2: #0a1422; --surface: #0f1620; --surface-2: #161f2b; --ink: #eef2f6; --ink-soft: #b9c4d0; --muted: #7f8c9a; --faint: #5a6675; --line: #1d2733; --line-strong: #2b3745; --primary: #37b6ae; --primary-hover: #5bd3ca; --primary-tint: #0f2b2b; --link: #5bd3ca; --on-primary: #060a11; --ok: #6fae8a; --ok-tint: #122420; --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: #8f9bab; --shadow: 0 1px 2px rgba(0,0,0,.5),0 10px 26px -12px rgba(0,0,0,.65); --shadow-lift: 0 2px 6px rgba(0,0,0,.6),0 22px 44px -18px rgba(0,0,0,.75); --edge: inset 0 1px 0 rgba(255,255,255,.045); --glow: 0 0 0 3px rgba(55,182,174,.20), 0 0 22px -4px rgba(55,182,174,.30); --hud: rgba(55,182,174,.45); --app-bg: radial-gradient(1500px 780px at 50% 118%, rgba(55,182,174,.11), transparent 56%), radial-gradient(1150px 660px at 80% -12%, rgba(96,116,158,.13), transparent 56%), radial-gradient(760px 460px at 6% 6%, rgba(122,88,112,.06), transparent 60%), linear-gradient(180deg, #0a1220 0%, #070c15 46%, #04070d 100%); }