/* OrbitraSCOUT v0 clickthrough: colour tokens. CONCEPTUAL, temporary brand. Ruled 9 September 2026. Base background #000305 given by Shane the same day. Reasoning is in research/05-COLOUR-RULING.md. This file is the ONLY place a colour is defined in this folder; every screen in screens/ links it and defines no colour itself. How it maps to the platform set (design/prototype/tokens.css, 145 properties): the SEMANTIC names below are identical to the platform's, so a copied screen keeps working. Only the ramp values change. Anything the platform defines that is not a colour (type, spacing, radii, motion) is carried over unchanged by the build script. */ :root { /* Base */ --bg: #000305; /* Neutral ramp, rebuilt on #000305. Cool blue-grey, less green than the platform's teal-tinted greys, so the cyan accent has nothing near it. Same step logic as the platform: canvas, surface, raised. */ --neutral-50: #E9F0F2; --neutral-100: #D0D9DE; --neutral-200: #B5C2C9; --neutral-300: #95A6B0; --neutral-400: #728693; --neutral-500: #526675; --neutral-600: #384A58; --neutral-700: #243340; --neutral-800: #14202A; --neutral-850: #0B141A; /* Three quarters of a step, added 12 September 2026. --bg-hover was a full step up the ramp, from --neutral-900 to --neutral-850, which on a card read as the card changing colour rather than as the pointer being over it (Shane: "the hover colour globally is too contrasted"). Halving it went too far the other way, so this sits three quarters of the way: a step of 4, 7, 7 per channel against the full step's 6, 9, 10 and the half step's 3, 5, 5. */ --neutral-875: #091217; --neutral-900: #050B10; --neutral-912: #04090D; --neutral-925: #020609; --neutral-950: #000305; /* Accent ramp, built around the temporary logo's cyan (#00A8B0, sampled from brand/scout-logo-horizontal-temp.png). Keeps the platform's "teal" property names so nothing breaks; the values are the new brand. */ /* RE-RULED 9 Sep, evening, when the knot-only mark arrived: its cyan is #00E0E0, brighter than the wordmark's #00A8B0. One ramp holds both so the mark sits on a step of it: 300 is the mark's cyan and carries links, focus and ghost text; 500 stays the button fill. */ --teal-100: #B8F6F7; --teal-200: #6FEDEF; --teal-300: #00E0E0; --teal-400: #00C4CC; --teal-500: #00A8B0; --teal-600: #008B92; --teal-700: #006C72; --teal-800: #004D52; --teal-900: #003236; /* Mint is RETIRED in this concept: one accent, and it is the brand's. The names stay so nothing referencing them breaks; they now resolve to the accent ramp. */ --mint-300: var(--teal-200); --mint-400: var(--teal-300); --mint-500: var(--teal-500); --mint-550: var(--teal-500); --mint-600: var(--teal-600); --mint-700: var(--teal-700); /* Status colours: unchanged from the platform. Their subtle fills were tuned for a slightly lighter canvas and read fine on this one. */ --success-text: #5DBD6F; --success-fill: #369E4E; --success-subtle: #102614; --success-subtleBorder: #234D2B; --warning-text: #D9951D; --warning-fill: #B37900; --warning-subtle: #2D1D05; --warning-subtleBorder: #593C08; --danger-text: #F27D72; --danger-fill: #D15C53; --danger-subtle: #331714; --danger-subtleBorder: #64312C; --info-text: #5BA8FC; --info-fill: #3689DD; --info-subtle: #0F2135; --info-subtleBorder: #224469; /* Semantic aliases: same names as the platform. */ --bg-canvas: var(--bg); --bg-surface: var(--neutral-900); --bg-raised: var(--neutral-850); /* CORRECTED 9 Sep, after the colour extraction: 19 of the 21 real screens paint the PAGE with --bg-inset (the desk and north-star are the only two on --bg-canvas). Both must resolve to the base. Inset wells on a surface still read as inset because the surface (#050B10) sits above the base. */ --bg-inset: var(--bg); --bg-hover: var(--neutral-875); /* A CARD NESTED IN A CARD (Shane, 13 September 2026: "give the inner cards a very slightly lighter background than the parent card"). Half a step, not the full one: --bg-raised is how this product separates a MENU from a page, and at that distance a nested card stops reading as the same kind of object, which is the ground Shane rejected the raised fill on the evening before. It shares its value with --bg-hover because half a step is half a step; they are named apart because one is a resting fill and the other is a pointer state, and a nested card that ever takes a hover will need the next stop up rather than this one. */ --bg-nested: var(--neutral-875); --border-subtle: var(--neutral-800); --border-default: var(--neutral-700); --border-strong: var(--neutral-600); --border-hover: var(--neutral-500); --text-primary: var(--neutral-50); --text-secondary: var(--neutral-300); --text-tertiary: var(--neutral-400); --text-disabled: var(--neutral-500); --text-onAction: var(--bg); --text-onFill: #FFFFFF; /* Primary action is the brand cyan with the base colour as its text. */ --action-primary-bg: var(--teal-500); --action-primary-bgHover: var(--teal-400); --action-primary-bgActive: var(--teal-600); --action-primary-text: var(--bg); --action-secondary-bg: var(--neutral-800); --action-secondary-bgHover: var(--neutral-700); --action-secondary-bgActive: var(--neutral-600); --action-secondary-text: var(--neutral-50); --action-ghost-text: var(--teal-300); --action-ghost-bgHover: var(--neutral-850); --link-default: var(--teal-300); --link-hover: var(--teal-200); --focus-ring: var(--teal-300); --focus-ringSecondary: var(--teal-600); --brand-primary: var(--teal-500); --brand-accent: var(--teal-300); --status-success-text: var(--success-text); --status-success-fill: var(--success-fill); --status-success-bg: var(--success-subtle); --status-success-border: var(--success-subtleBorder); --status-warning-text: var(--warning-text); --status-warning-fill: var(--warning-fill); --status-warning-bg: var(--warning-subtle); --status-warning-border: var(--warning-subtleBorder); --status-danger-text: var(--danger-text); --status-danger-fill: var(--danger-fill); --status-danger-bg: var(--danger-subtle); --status-danger-border: var(--danger-subtleBorder); --status-info-text: var(--info-text); --status-info-bg: var(--info-subtle); --status-info-border: var(--info-subtleBorder); /* ---------- DESIGN SYSTEM V2, added 9 September late (rules in DESIGN-SYSTEM-V2.md) ---------- */ /* Type, tuned to #000305: Stripe's sizes and line-heights; weight 400 where Stripe uses 300 */ --type-heading: 400 22px/36px var(--font-ui); --type-body: 400 16px/24px var(--font-ui); /* THE BODY LINE, MEASURED OFF THE DESK, 10 September 2026 (corrections ruling A3). Shane named the desk's status line, the line under the greeting, as the reference for every body line in the product. It was read in a real browser (Chrome, the folder served over http at 1440 by 900, computed styles off the live element #scout-voice on D1-desk-day-one.html?setup=1): font-size 15px line-height 22px weight 400 colour rgb(180, 188, 195), which is #B4BCC3, the value --text-secondary already carries family Inter, which is --font-ui IT IS NOT THE SAME AS --type-body, which is 16px/24px: the measured line is one step smaller in both. The ruling says the measured value wins where the two differ, so the two tokens below carry the measurement and every body line takes them (components-v2.css section 4). --type-body is left where it is because it is also the INPUT text size, which design system v2 measured off Stripe at 16 and which is a control rather than a body line. */ --type-body-secondary: 400 15px/22px var(--font-ui); --text-body: #B4BCC3; --type-label: 400 14px/20px var(--font-ui); --type-caption: 400 13px/18px var(--font-ui); --type-button: 500 16px/24px var(--font-ui); --type-link: 400 14px/20px var(--font-ui); --tracking-heading: -0.2px; /* Secondary text goes neutral: the v1 teal-tinted greys retire */ --text-secondary: #B4BCC3; --text-tertiary: #8C959D; /* Radius: Stripe's 12 for cards and modals, 6 for controls */ --radius-card: 12px; --radius-control: 6px; /* Space */ --pad-card: 64px; /* 1024 and up; 32px at 768 to 1023; 16px below 768, set in components-v2.css */ --space-label: 12px; --space-group: 24px; --space-text-control: 24px; --space-caption-control: 12px; --space-buttons: 12px; /* Controls */ --control-h: 44px; --control-h-secondary: 40px; --control-pad-x: 12px; --border-input: var(--neutral-800); --focus-halo: 0 0 0 1px var(--teal-400), 0 0 0 4px rgba(0,196,204,.25); /* Surfaces: modal = page; footer strip one step up; elevation is a teal glow, never grey */ --bg-modal: var(--bg); /* THE CARD FOOTER STRIP'S FILL, computed 10 September 2026 to Shane's rule: the strip's contrast against the card surface must match Stripe's own. Stripe: the strip is rgb(248,250,253) on a white card, rgb(255,255,255). relative luminance of the strip = 0.95419522, of white = 1.0 contrast ratio = (1.0 + 0.05) / (0.95419522 + 0.05) = 1.045613 to 1 Ours: the card is var(--bg-modal), which is var(--bg), #000305. relative luminance of #000305 = 0.00076082 the fill we need therefore has luminance 1.045613 x (0.00076082 + 0.05) - 0.05 = 0.00307620 #050B10 has luminance 0.00309020, a ratio of 1.045889 to 1: 0.0003 away from Stripe's, and the closest any 8-bit cool blue-grey gets (the green channel quantises in steps of about 0.005 of a ratio point down here). That is the value this token already resolved to as var(--neutral-900), so the fill does not move. It is written as the literal now because it is a computed value in its own right, not a step on the neutral ramp: if the ramp is ever re-tuned the strip must stay at Stripe's delta. What changed on 10 September is the strip's SHAPE, not its tone (inset 24px, rounded on all four corners, no hairline). Full working in BUILD-REPORT.md, "Strip, sheet and no-scroll rule, 10 September 2026". */ --bg-footer: #050B10; /* THE TEAL GLOW IS OFF EVERY DIALOG. Shane, 14 September 2026. It was a 1px teal ring at six per cent and a 24 by 64 teal halo at ten, over a deep black drop, and it reached seven of the build's eight dialogs plus the review drawer and the desk's pop-up. The accent in this product is for links, the active state, and who the company is; a dialog is none of those, and a halo in the brand colour around every surface that opens over the page is the accent being used as decoration. What separates a dialog from the page it covers is the drop and the scrim, so the drop is what is left. ONE TOKEN, so it lands on all of them at once rather than on whichever one was being looked at. */ --elev-modal: 0 12px 32px rgba(0,0,0,.65); /* THE SAME GLOW, AT FOUR PER CENT, ON THE ONLY OTHER SURFACE THAT CARRIED IT: the pre-login card, which sits over the blurred backdrop and is the one card in this product with any lift at all. Taken off with the dialog's, 14 September 2026, because a ring in the brand colour on one surface and not on any other is the odd one out rather than a rule. Its drop is untouched, and the drop is what lifts it off the backdrop. */ --elev-card: 0 8px 24px rgba(0,0,0,.45); --overlay-scrim: rgba(0,3,5,.55); --overlay-blur: 8px; /* THE DIALOG'S TOP INSET, ruled by Shane 10 September 2026: a dialog never sits closer to the top of the window than a tenth of the window's height, and never closer than 72 pixels however short the window is. It is also the bottom inset, which is what keeps a dialog that fits exactly centred (see components-v2.css section 10). */ --dialog-inset-y: max(10vh, 72px); /* Pre-login card */ --card-w: 540px; /* The review drawer (decision D-182, ruling 4). Its width is the conversation panel's own width in the north star file, so the two read as one surface: 420px, stepping to 340px below 1360, which is where that file steps too. The step lives in components-v2.css, because a media query cannot live in a token file. Its interior padding is one step down the --pad-card scale: 64px each side of a 420px column leaves 292px, which will not hold the evidence rows and the draft. */ --drawer-w: 420px; --pad-drawer: 32px; /* ---------- THE CHAT AS A MODE OF THE DESK, added 10 September 2026 ---------- Decision D-185, ruled in ../research/12-CHAT-AS-A-MODE-RULING.md section 5, where each number is measured off ChatGPT read live in Shane's own Chrome on 10 September 2026 and mapped to this build's own names. --sidebar-w the recents sidebar in the conversation mode, 260px. --radius-row a list row's radius, 10px. It is deliberately NOT --radius-control (6px), which the ruling measured as reading too tight for a 36px row; it is universal, for recents, the trades list and the vault. --conversation-w the conversation column, 720px, centred. */ --sidebar-w: 260px; --radius-row: 10px; /* --radius-search a search field's radius, fully round. It is deliberately NOT --radius-control (6px), for the same kind of reason --radius-row is not: a search field is a different control from a field you fill in, you type to filter rather than to enter a value, and the round end is the convention that says so. Ruled by Shane, 12 September 2026. One more named radius, recorded here rather than set ad hoc on a screen. */ --radius-search: var(--r-full); /* The plus the page's action carries, as a mask so it takes the button's colour. */ --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); --conversation-w: 720px; /* Elevation on a near-black canvas is carried by surface steps and borders; black shadows barely read. Kept so nothing breaks; the inset hairline does the visible work. */ --elev-2: 0 1px 0 0 var(--neutral-700) inset, 0 2px 8px rgba(0,0,0,.5); --elev-3: 0 0 24px rgba(0,0,0,.6); /* THE SYSTEM'S MOST SUBTLE DROP, named 13 September 2026. It is --elev-2's drop without --elev-2's 1px inset highlight, which is a button recipe rather than a card one; the register already ruled that an in-page card takes the drop and drops the highlight, and four places were writing the same three numbers out by hand to do it. Anything quieter than this is no shadow at all. */ --elev-drop: 0 2px 8px rgba(0,0,0,.5); }