/* ============================================================================ PILOTLIGHT DESIGN TOKENS — tokens.css Single source of truth. Components MUST reference these variables. Raw hex / px values in component code are a spec violation. Generated from verified WCAG contrast math (see 04-color-system.md). ========================================================================== */ :root { /* -------------------------------------------------------------------------- 1. COLOR — SURFACES (Phthalo-green hue family, darkest → lightest) bg-4 is brand Phthalo Green #123524. Surfaces are NEVER used as text. -------------------------------------------------------------------------- */ --bg-0: #000000; /* canvas: app root, graph & flow canvases, input wells */ --bg-1: #000B04; /* panel body */ --bg-2: #01140A; /* raised chrome: panel headers, table headers, toolbars */ --bg-3: #041E11; /* hover rows, selected rows (non-active), tooltips */ --bg-4: #123524; /* PHTHALO — active row, menu highlight, active tab, focus */ --bg-5: #1E402E; /* pressed state of bg-4 */ /* -------------------------------------------------------------------------- 2. COLOR — LINES -------------------------------------------------------------------------- */ --line-1: #173526; /* hairlines: row separators, panel gutters, grid */ --line-2: #31503F; /* component borders: inputs, buttons, nodes, menus */ --line-3: #557161; /* strong borders: hover, dialog frame, bevel highlight */ /* -------------------------------------------------------------------------- 3. COLOR — TEXT (phosphor-tinted neutrals) Contrast on bg-0: text-1 18.2:1 · text-2 10.6:1 · text-3 5.8:1 · text-4 3.6:1 -------------------------------------------------------------------------- */ --text-1: #E7F1EE; /* primary: data values, body, titles */ --text-2: #AEBBB7; /* secondary: descriptions, inactive-panel titles */ --text-3: #7D8985; /* tertiary: labels, column headers, timestamps, units */ --text-4: #5D6663; /* DISABLED / PLACEHOLDER ONLY — fails AA for body text */ /* -------------------------------------------------------------------------- 4. COLOR — SYSTEM GREEN (Russian Cockpit Green hue family) green-500 is brand #00947A (5.52:1 on black — legal for text). Meaning: "the system / interactive / nominal". Never used for data types. -------------------------------------------------------------------------- */ --green-900: #00271E; /* running-node header fill, subtle active wash */ --green-800: #003D31; /* selection wash on canvases (use with alpha instead) */ --green-700: #00614F; /* ::selection bg, splitter hover, handling L0 banner */ --green-600: #007B65; /* UI-component contrast only (4.0:1) — not text */ --green-500: #00947A; /* PRIMARY: focus ring, primary button, active border */ --green-400: #36AF93; /* primary hover, OK status, minimap viewport */ --green-300: #5CCFB2; /* links, panel type-codes, accent text, live KPI */ --green-200: #7CEDCF; /* rare: emphasized accent text on bg-4/bg-5 */ --green-100: #ABFFE7; /* rare: display-size numerals on black */ /* Phosphor "live" green — ONLY for data that is streaming right now: command-line echo, newest log lines, live counters. Static data never uses this color. That restriction is what gives it meaning. */ --live: #33FF66; /* -------------------------------------------------------------------------- 5. COLOR — STATUS (SCADA semantics; never reused for data types) -------------------------------------------------------------------------- */ --alarm: #FF3B3B; /* critical / error / unacknowledged alarm (5.9:1) */ --warn: #FF8C1A; /* warning / stale / needs attention (9.0:1) */ --ok: #36AF93; /* nominal / success / acknowledged */ --info: #AEBBB7; /* neutral informational */ /* -------------------------------------------------------------------------- 6. COLOR — HANDLING / CLASSIFICATION BANNER LEVELS Text color is mandated per level (contrast-checked). -------------------------------------------------------------------------- */ --handling-0-bg: #00614F; --handling-0-fg: var(--text-1); /* e.g. INTERNAL */ --handling-1-bg: #0298FC; --handling-1-fg: #000000; /* e.g. RESTRICTED */ --handling-2-bg: #B00020; --handling-2-fg: var(--text-1); /* e.g. SENSITIVE */ --handling-3-bg: #FF8C1A; --handling-3-fg: #000000; /* e.g. COMPARTMENTED */ --handling-4-bg: #FFF020; --handling-4-fg: #000000; /* e.g. SPECIAL ACCESS */ /* -------------------------------------------------------------------------- 7. COLOR — DATA TYPES (entity classes) Optimized in OKLab: min pairwise separation 0.134; all ≥ 6.4:1 on bg-0. RULE: color is never the only channel. Every type also has a SHAPE and a three-letter REFERENCE DESIGNATOR (see 07-graph-visualization.md). Type colors are used for: glyphs, node strokes, cords, chips, designator text. They are NOT used for text on bg-4/bg-5 (use text-1 there). -------------------------------------------------------------------------- */ --type-person: #FDBB64; /* PER amber ○ circle */ --type-alias: #FC9BFD; /* ALS orchid ◌ dashed circle */ --type-organization: #A874F6; /* ORG violet □ square */ --type-location: #23ECF7; /* LOC cyan ◇ diamond */ --type-domain: #0298FC; /* DOM blue △ triangle up */ --type-ip: #FF36EA; /* NET magenta ▽ triangle down */ --type-email: #A5C12D; /* EML lime ▭ wide rectangle 3:2 */ --type-phone: #FF67A2; /* TEL rose ▯ tall rectangle 2:3 */ --type-financial: #FFF020; /* FIN yellow ⬡ octagon */ --type-device: #ACBBFD; /* DEV periwinkle ▢ chamfered square */ --type-document: #D9DEDB; /* DOC paper ▤ rectangle, folded corner*/ --type-event: #8696A6; /* EVT steel ▬ flag / timeline marker */ /* Alpha helpers for type fills (selected node fill, chip background). Use color-mix so the fill always derives from the token. */ --type-fill-alpha: 18%; --type-glow-alpha: 45%; /* -------------------------------------------------------------------------- 8. TYPOGRAPHY -------------------------------------------------------------------------- */ --font-ui: "Alliance No.2", "Inter", "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", "SF Mono", Consolas, "Liberation Mono", monospace; /* Alliance No.2 feature settings. ss04 = serifed I, flat-top A, flat V: disambiguates I/l and gives drafting-table letterforms. Always on. */ --features-ui: "ss04"; --features-caps: "ss04", "case"; /* uppercase labels: cap-aligned punctuation */ --features-num: "ss04", "tnum"; /* any numeral in the UI font */ --features-mono: "zero", "tnum"; /* Plex Mono: slashed zero */ --weight-light: 300; /* display sizes ≥ 20px ONLY */ --weight-regular: 400; /* body, data, menus */ --weight-medium: 500; /* panel titles, buttons, emphasis, column headers */ /* Size / line-height pairs. 12px is the absolute floor. Nothing smaller. */ --text-xs: 12px; --leading-xs: 16px; /* micro labels (UPPERCASE), footnotes, axis */ --text-sm: 13px; --leading-sm: 20px; /* dense data: cells, tree rows, log lines */ --text-base: 14px; --leading-base: 20px; /* default UI: menus, inputs, buttons, prose */ --text-md: 16px; --leading-md: 24px; /* dialog titles, section heads */ --text-lg: 20px; --leading-lg: 28px; /* workspace title (Light) */ --text-xl: 28px; --leading-xl: 32px; /* KPI numerals (Light, tnum) */ --text-2xl: 40px; --leading-2xl: 44px; /* login wordmark, empty-canvas mark (Light) */ --tracking-caps: 0.08em; /* all uppercase labels */ --tracking-display: -0.01em; /* Light display sizes */ --tracking-normal: 0; /* -------------------------------------------------------------------------- 9. SPACING (dense / terminal scale — 4px grid, 8px rhythm) -------------------------------------------------------------------------- */ --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 24px; --space-7: 32px; --space-8: 48px; /* Fixed component heights — the vertical rhythm of the terminal. */ --h-banner: 20px; /* handling banner */ --h-menubar: 24px; /* menu bar / window title bar */ --h-cmdline: 28px; /* global command line */ --h-panelhead: 24px; /* panel header */ --h-tab: 24px; /* content tabs */ --h-toolbar: 28px; /* panel toolbars */ --h-row: 24px; /* table row, tree row, menu item, property row */ --h-control: 28px; /* inputs, buttons, selects */ --h-msgline: 24px; /* message line above status bar */ --h-statusbar: 22px; /* status bar */ --h-node-head: 20px; /* flow node header */ --h-node-row: 20px; /* flow node parameter row */ --w-dock-left: 240px; --w-dock-right: 280px; --h-dock-bottom:160px; --hit-min: 24px; /* minimum pointer target (desktop, WCAG 2.2 2.5.8) */ /* -------------------------------------------------------------------------- 10. SHAPE -------------------------------------------------------------------------- */ --radius: 0px; /* GLOBAL. No rounded corners anywhere in chrome. */ --border: 1px; --border-strong: 2px; /* Bevel (the OS9/Win2000 "veneer") — raised chrome only: buttons, dialog frames, splitter grips. Never on data panels or canvases. */ --bevel-raised: inset 1px 1px 0 var(--line-3), inset -1px -1px 0 #000000; --bevel-sunken: inset 1px 1px 0 #000000, inset -1px -1px 0 var(--line-3); /* -------------------------------------------------------------------------- 11. ELEVATION & GLOW Elevation = hard 1px ring + black shadow. No soft gray drop shadows. Glow = functional signal only (focus, selection, live). */ --shadow-float: 0 0 0 1px var(--line-2), 0 8px 24px rgba(0, 0, 0, 0.7); --shadow-modal: 0 0 0 1px var(--line-3), 0 16px 48px rgba(0, 0, 0, 0.8); --glow-focus: 0 0 0 3px rgba(0, 148, 122, 0.28); --glow-select: 0 0 8px rgba(0, 148, 122, 0.55); --glow-live: 0 0 6px rgba(51, 255, 102, 0.45); --glow-alarm: 0 0 8px rgba(255, 59, 59, 0.55); /* Focus ring — identical everywhere. Never removed, only restyled via these.*/ --focus-outline: 1px solid var(--green-400); --focus-offset: 0px; /* -------------------------------------------------------------------------- 12. GRID (canvas backgrounds for Graph & Flow) -------------------------------------------------------------------------- */ --grid-minor-step: 16px; --grid-major-step: 128px; --grid-minor-color: rgba(23, 53, 38, 0.75); /* 1px dots */ --grid-major-color: rgba(49, 80, 63, 0.55); /* 1px lines */ --snap-step: 8px; /* -------------------------------------------------------------------------- 13. MOTION — terminal-fast, linear, meaningful -------------------------------------------------------------------------- */ --dur-hover: 60ms; /* hover/pressed color changes */ --dur-fast: 80ms; /* focus ring, tooltip appear, tab switch */ --dur-base: 120ms; /* menu/dropdown open, panel focus, row expand */ --dur-slow: 200ms; /* dialog open, dock collapse, panel maximize */ --ease-linear: linear; --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-step: steps(1, end); /* blink, cursor */ --blink-cursor: 1000ms; /* 50% duty */ --blink-alarm: 1000ms; /* 1 Hz, 50% duty, until acknowledged */ --pulse-running: 500ms; /* running-node LED, 2 Hz */ --flow-dash-speed: 1000ms; /* cord dash travel per cycle */ --tooltip-delay: 400ms; /* -------------------------------------------------------------------------- 14. Z-INDEX -------------------------------------------------------------------------- */ --z-base: 0; --z-panel-float: 100; --z-dropdown: 200; --z-modal: 300; --z-msgline: 400; --z-banner: 500; } /* Reduced motion: motion becomes state. Blink → steady + icon. Dash → static. */ @media (prefers-reduced-motion: reduce) { :root { --dur-hover: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --blink-cursor: 0ms; --blink-alarm: 0ms; --pulse-running: 0ms; --flow-dash-speed: 0ms; } } /* ============================================================================ GLOBAL BASE STYLES (apply once at app root) ========================================================================== */ @font-face { font-family: "Alliance No.2"; src: url("fonts/alliance-no2-light.otf") format("opentype"); font-weight: 300; font-display: swap; } /* Regular (400) and Medium (500) are REQUIRED for body/UI text. Add them here when licensed. Do not ship with Light only — see 03-typography.md. */ /* @font-face { font-family: "Alliance No.2"; src: url("fonts/alliance-no2-regular.otf") format("opentype"); font-weight: 400; font-display: swap; } */ /* @font-face { font-family: "Alliance No.2"; src: url("fonts/alliance-no2-medium.otf") format("opentype"); font-weight: 500; font-display: swap; } */ @font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; } html, body { margin: 0; height: 100%; background: var(--bg-0); color: var(--text-1); font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--leading-base); font-weight: var(--weight-regular); font-feature-settings: var(--features-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow: hidden; /* the shell owns scrolling, never the window */ user-select: none; /* data regions opt back in with .selectable */ } *, *::before, *::after { box-sizing: border-box; border-radius: var(--radius); } .selectable, input, textarea, [contenteditable] { user-select: text; } ::selection { background: var(--green-700); color: var(--text-1); } :focus { outline: none; } :focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); box-shadow: var(--glow-focus); } a { color: var(--green-300); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } /* Utility classes for the three type treatments */ .t-caps { font-family: var(--font-ui); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-feature-settings: var(--features-caps); color: var(--text-3); } .t-num { font-feature-settings: var(--features-num); font-variant-numeric: tabular-nums; } .t-mono { font-family: var(--font-mono); font-feature-settings: var(--features-mono); font-variant-numeric: tabular-nums; } .t-live { color: var(--live); } /* Scrollbars: thin, square, quiet */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-1); } ::-webkit-scrollbar-thumb { background: var(--line-2); border: 1px solid var(--bg-1); } ::-webkit-scrollbar-thumb:hover { background: var(--line-3); } ::-webkit-scrollbar-corner { background: var(--bg-1); }