/* ============================================================================ UCARETRON / OmniGram — design tokens (v3.0) ---------------------------------------------------------------------------- Two brands, two deliberately different visual languages, one token contract. UCARETRON → Scientific Light white · deep navy · medical blue OmniGram → Computational Dark black · navy · electric blue · cyan The page declares which one it is on . Every component in style.css reads only the semantic names below, so a brand switch is a palette swap and nothing else. A third scope, .instrument, is a *dark measurement panel* that can be dropped into a light UCARETRON page (hero field, impedance plots, 3-D scenes). Glow and additive blending only work on an ink ground; instead of forcing the whole site dark for their sake, they get a bordered panel of their own. Contrast: every text/background pair below was measured (WCAG 2.1 relative luminance), lowest pass 4.55:1. Values marked "graphic only" are under 4.5:1 and must never carry text. ========================================================================== */ /* ------------------------------------------------------------ 0. font faces Self-hosted (spec §68) — no CDN, no third-party request, works from file://. Pretendard is subset to Latin + punctuation + arrows + box drawing; the site is English-only, which takes each weight from ~780 KB to ~27 KB. */ @font-face { font-family: 'Pretendard'; src: url('../fonts/Pretendard-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('../fonts/Pretendard-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('../fonts/Pretendard-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('../fonts/Pretendard-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('../fonts/Pretendard-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ------------------------------------------------------- 1. brand-neutral Typography, rhythm and motion do not change between brands. Only colour does. */ :root { --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', ui-monospace, 'Cascadia Mono', Consolas, monospace; /* layout */ --container-max: 1280px; --shell: var(--container-max); /* legacy alias used across style.css */ --gutter: clamp(1rem, 4vw, 2.5rem); /* 4 px spacing scale (spec §4-1) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius: var(--radius-md); /* legacy alias */ /* motion */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-out: var(--ease); /* legacy alias */ --dur-fast: .16s; --dur: .3s; --dur-slow: .55s; --header-h: 72px; } /* ============================================================================ 2. UCARETRON — Scientific Light (the default) ---------------------------------------------------------------------------- White ground, ink text, one working blue. Colour is information, not decoration: the brand blue marks actions and data, and nothing else is coloured for the sake of being coloured. measured contrast on #FFFFFF / #F8FAFC / #F1F5F9 --text #0F172A 17.85 / 17.06 / 16.30 --text-2 #475569 7.58 / 7.24 / 6.92 --text-3 #5C6B7F 5.43 / 5.19 / 4.96 --accent #0052CC 6.82 / 6.52 / 6.23 --accent-2 #0047B3 8.23 / 7.86 / 7.51 --accent-3 #0369A1 5.93 / 5.67 / 5.42 --signal #B45309 5.02 / 4.80 / 4.58 ========================================================================== */ :root, :root[data-brand='ucaretron'] { --bg: #FFFFFF; --surface-1: #FFFFFF; /* cards sit on the page, separated by a hairline */ --surface-2: #F8FAFC; /* banded sections */ --surface-3: #F1F5F9; /* pressed / inset */ --line: #E2E8F0; --line-2: #CBD5E1; --text: #0F172A; --text-2: #475569; --text-3: #5C6B7F; /* spec says #64748B; darkened one step so it still clears 4.5:1 on --surface-3 (measured 4.34 → 4.96) */ --accent: #0052CC; /* brand blue — actions, links, data series 1 */ --accent-2: #0047B3; /* hover / pressed */ --accent-3: #0369A1; /* data series 2, text-safe */ --accent-vivid:#0EA5E9; /* graphic only (2.77:1) — strokes, fills, never text */ --accent-soft: rgba(0, 82, 204, .08); --signal: #B45309; /* data series 3 (amber), text-safe */ /* Engine semantics (spec §44) — same meaning wherever they appear. cyan = a discovered relationship · red = a contradiction · green = resolved / verified · grey = unknown or insufficient evidence. */ --relationship: #0369A1; --contradiction: #BE123C; --resolved: #047857; --unknown: #5C6B7F; --on-accent: #FFFFFF; --btn-solid-bg: var(--accent); --btn-solid-fg: var(--on-accent); /* raw channels for Canvas2D (rgba() strings are the safest there) */ --c-accent-rgb: 0 82 204; --c-signal-rgb: 180 83 9; --c-text-rgb: 15 23 42; --c-grid-rgb: 148 163 184; --shadow-1: 0 1px 2px rgba(15, 23, 42, .05), 0 2px 8px rgba(15, 23, 42, .05); --shadow-2: 0 2px 6px rgba(15, 23, 42, .07), 0 18px 44px rgba(15, 23, 42, .09); color-scheme: light; } /* ============================================================================ 3. .instrument — a dark measurement panel inside a light page ---------------------------------------------------------------------------- Same token names, ink values. Anything nested inherits automatically, so the hero field, the impedance explorer and the 3-D scenes need no special casing. ========================================================================== */ .instrument { --bg: #0B1220; --surface-1: #111A2B; --surface-2: #162034; --surface-3: #1D2A42; --line: #24334D; --line-2: #38496A; --text: #F1F5F9; --text-2: #C3CDDC; --text-3: #93A1B5; --accent: #7FB2FF; /* the brand blue lifted for an ink ground (9.11:1) */ --accent-2: #A8CBFF; --accent-3: #56D3E0; --accent-vivid:#22D3EE; --accent-soft: rgba(127, 178, 255, .14); --signal: #EBBB74; --relationship: #56D3E0; --contradiction: #F43F5E; --resolved: #34D399; --unknown: #93A1B5; --on-accent: #08101F; --btn-solid-bg: var(--text); --btn-solid-fg: #0B1220; --c-accent-rgb: 127 178 255; --c-signal-rgb: 235 187 116; --c-text-rgb: 241 245 249; --c-grid-rgb: 147 161 181; --shadow-1: 0 1px 2px rgba(0, 0, 0, .32), 0 4px 14px rgba(0, 0, 0, .28); --shadow-2: 0 2px 8px rgba(0, 0, 0, .40), 0 20px 50px rgba(0, 0, 0, .44); color-scheme: dark; background: var(--bg); color: var(--text); } /* ============================================================================ 4. OmniGram — Computational Dark ---------------------------------------------------------------------------- Not "the same site with the lights off". A different instrument: near-black ground, electric blue for process, and three colours that carry *meaning* rather than mood (spec §44) — cyan a discovered relationship red a contradiction emerald resolved / verified grey unknown / insufficient evidence measured contrast on #080B12 / #0D131F / #111827 --text #F8FAFC 18.81 / 17.76 / 16.96 --text-2 #CBD5E1 13.26 / 12.52 / 11.95 --text-3 #94A3B8 7.68 / 7.25 / 6.92 --accent #3B82F6 5.35 / 5.05 / 4.82 cyan #22D3EE 10.89 / 10.28 / 9.82 red #F43F5E 5.36 / 5.06 / 4.83 emerald #10B981 7.76 / 7.33 / 6.99 ========================================================================== */ :root[data-brand='omnigram'] { --bg: #080B12; --surface-1: #0D131F; --surface-2: #0D131F; --surface-3: #111827; --line: #1E293B; --line-2: #334155; --text: #F8FAFC; --text-2: #CBD5E1; --text-3: #94A3B8; --accent: #3B82F6; --accent-2: #60A5FA; --accent-3: #22D3EE; --accent-vivid:#22D3EE; --accent-soft: rgba(59, 130, 246, .16); --signal: #EBBB74; /* semantic engine colours — same meaning on every OmniGram surface */ --relationship: #22D3EE; --contradiction: #F43F5E; --resolved: #10B981; --unknown: #64748B; --on-accent: #080B12; /* ink on the bright fill — 5.35:1, white would be 3.68 */ --btn-solid-bg: var(--accent); --btn-solid-fg: var(--on-accent); --c-accent-rgb: 59 130 246; --c-signal-rgb: 235 187 116; --c-text-rgb: 248 250 252; --c-grid-rgb: 148 163 184; --shadow-1: 0 1px 2px rgba(0, 0, 0, .40), 0 4px 14px rgba(0, 0, 0, .34); --shadow-2: 0 2px 8px rgba(0, 0, 0, .48), 0 20px 50px rgba(0, 0, 0, .50); color-scheme: dark; } /* On OmniGram the instrument scope is the page itself — do not re-tint. */ :root[data-brand='omnigram'] .instrument { --bg: #05080E; --surface-1: #0B1018; --surface-2: #0D131F; --surface-3: #111827; } /* ============================================================================ 5. Evidence grades (spec §25) ---------------------------------------------------------------------------- Six grades, ordered by how directly the claim touches reality. These are *labels for the nature of a fact*, not a score: a literature-based figure from a peer-reviewed primary source is not "worse" than one of our own single measurements, it is a different kind of thing. Never render them as a bar chart or a percentage (spec §95). ========================================================================== */ :root { --ev-physical-fg: #047857; --ev-physical-bg: rgba(4, 120, 87, .10); --ev-tool-fg: #0052CC; --ev-tool-bg: rgba(0, 82, 204, .09); --ev-spec-fg: #0369A1; --ev-spec-bg: rgba(3, 105, 161, .09); --ev-literature-fg: #6D28D9; --ev-literature-bg: rgba(109, 40, 217, .09); --ev-intent-fg: #B45309; --ev-intent-bg: rgba(180, 83, 9, .10); --ev-illustrative-fg:#5C6B7F; --ev-illustrative-bg:rgba(92, 107, 127, .10); } .instrument, .credits-overlay, :root[data-brand='omnigram'] { --ev-physical-fg: #34D399; --ev-physical-bg: rgba(52, 211, 153, .12); --ev-tool-fg: #7FB2FF; --ev-tool-bg: rgba(127, 178, 255, .12); --ev-spec-fg: #56D3E0; --ev-spec-bg: rgba(86, 211, 224, .12); --ev-literature-fg: #C4B5FD; --ev-literature-bg: rgba(196, 181, 253, .12); --ev-intent-fg: #EBBB74; --ev-intent-bg: rgba(235, 187, 116, .12); --ev-illustrative-fg:#94A3B8; --ev-illustrative-bg:rgba(148, 163, 184, .12); } /* Sharper hairlines when the visitor asks for more contrast. */ @media (prefers-contrast: more) { :root { --line: var(--line-2); --text-3: var(--text-2); } }