/* app-tokens.css - the ONE file, besides the vendored tokens-v2.css and os.css, where a hex colour literal may appear (bin/hex-audit ALLOWED names it; PRD-217 D4). It holds the colour tokens the app promoted out of os.css's app-additions region as those blocks move to area files (PRD-217 S3b). Area files are token-only: `var(--...)` and nothing else. Loads after tokens-v2.css and before os.css (StaffStylesheets::ORDER), so every token here is defined before any rule that reads it. */ /* Promoted from os.css's trailing phone block by PRD-217 S3b (phone-overrides-2.css): the sticky bar's open-state scrim and its three glass tints. Values verbatim. */ :root{ --phone-scrim:rgba(17,24,39,.5); --phone-glass-06:rgba(255,255,255,.06); --phone-glass-08:rgba(255,255,255,.08); --phone-glass-20:rgba(255,255,255,.2); } /* Promoted from os.css's planning block by PRD-217 S3b (planning-3.css, planning-2.css): the white glass tints on the navy bulk bar and sticky bar. Values verbatim. */ :root{ --glass-28:rgba(255,255,255,.28); --glass-34:rgba(255,255,255,.34); --glass-62:rgba(255,255,255,.62); } /* Promoted from os.css's staff chrome block by PRD-217 S3b (staff-chrome.css): the account menu's white on the navy rail and its four glass tints. Values verbatim. */ :root{ --chrome-fg:#fff; --glass-07:rgba(255,255,255,.07); --glass-09:rgba(255,255,255,.09); --glass-11:rgba(255,255,255,.11); --glass-13:rgba(255,255,255,.13); } /* Promoted from os.css's front-door provider buttons by PRD-217 S3b (front-door.css): the providers' own brand colours, literal by definition. Values verbatim. */ :root{ --brand-google-red:#EA4335; --brand-google-blue:#4285F4; --brand-google-yellow:#FBBC05; --brand-google-green:#34A853; --brand-microsoft-red:#F25022; --brand-microsoft-green:#7FBA00; --brand-microsoft-blue:#00A4EF; --brand-microsoft-yellow:#FFB900; } /* Promoted from os.css's page gate deck by PRD-217 S3b (page-gate-deck.css): the key chip's white glass on a press. Value verbatim. */ :root{ --glass-25:rgba(255,255,255,.25); } /* Promoted from os.css's water cooler overlays by PRD-217 S3b (water-cooler-overlays.css): the arrival moment's and the Friday wheel's slate palette and scrims (DIRECTION rows 536 and 550, the INVARIANTS 10 carve-out), and three more white glass tints. Values verbatim. */ :root{ --overlay-ink:#0f172a; --overlay-line:#334155; --overlay-text-soft:#e2e8f0; --overlay-text-muted:#cbd5e1; --overlay-text-faint:#94a3b8; --overlay-scrim-995:rgba(15,23,42,.995); --overlay-scrim-975:rgba(15,23,42,.975); --glass-06:rgba(255,255,255,.06); --glass-08:rgba(255,255,255,.08); --glass-12:rgba(255,255,255,.12); } /* Promoted from os.css's research Slides view by PRD-217 S3b (research-slides.css): the picture slide's band text, white at .82 on the picture. Value verbatim. */ :root{ --glass-82:rgba(255,255,255,.82); } /* Promoted from os.css's task page by PRD-217 S3b (task-page.css): the RESEARCH verb tag's purple (PRD-103 S2, DIRECTION row 339) - the mark, its wash and its ink. Values verbatim. */ :root{ --research-tag:#8b7bb0; --research-tag-wash:#efecf6; --research-tag-ink:#5f5384; } /* Promoted from os.css's face by PRD-217 S3b (ui-face.css): Ui::FaceComponent's initials palette (PRD-100 D18; six values clear of the status hues, no design-of-record hex) and the white the initials wear. Values verbatim. */ :root{ --face-fg:#fff; --face-c0:#3b5bdb; --face-c1:#0f9d8c; --face-c2:#7c3aed; --face-c3:#be185d; --face-c4:#475569; --face-c5:#b45309; } /* Promoted from os.css's chrome counts by PRD-217 S3b (topbar-counts.css): the navy rail's green tint - the switch tile's ground, which the Technical rail's Review count pill borrows (PRD-178 D4, DIRECTION rows 564 and 599). Value verbatim; tokens-v2.css carries .14, .16 and .35 of the same green but not this .22. */ :root{ --rail-green-tint:rgba(41,207,168,.22); } /* Promoted from os.css's app-additions :root block by PRD-217 (Ross, 2026-09-27), the last block in that region: the page spacing (PRD-232 D1) and the tokens the port-time hex cleanup (PRD-011), PRD-046 and PRD-062 added. Values and order verbatim. The client portal's report deck loads this file but not os.css, so these tokens now resolve there too (its tooltip text reads --overlay-fg). */ :root{ /* THE PAGE SPACING (PRD-232 D1; the sheet's example screens, Figma 118:1487 and every other "Main" frame): 40px above the page and below it, a 48px gutter, 24px between boxes. The phone screen (Figma 128:964) is 24 / 16 / 16, set in phone-overrides-1.css. The top is the sheet's `layout/page-top` (tokens-v3.css). */ --body-top-pad: var(--page-top); /* the page's own top and bottom padding (`.app-main>.body`); the planning head sticks at it */ --page-gutter: var(--space-7); /* the page's side padding, 48px */ --page-gap: var(--space-5); /* the gap between the page's boxes, 24px */ --color-on-primary: #08312a; /* was inline in .btn-primary - text on the green fill */ --status-info-fg: #1f5590; /* was inline in .b-info - AA text on --color-info-bg */ --status-primary-fg:#0e7d63; /* was inline in .b-primary - AA text on --color-primary-bg */ --agent-border: #bfe9dc; /* was inline in .tcard.running - card border while an agent runs */ --overlay-fg: #ffffff; /* NEW (PRD-046 P46B) · light text on a dark image scrim - Trix's attachment caption pill (app/assets/stylesheets/ actiontext.css), currently inert: attachments are off in v1 (PRD-046 §8) */ --overlay-bg: rgba(17,24,39,0.72); /* NEW (PRD-046 P46B) · the scrim itself, same ink as --color-text at high opacity rather than flat black, so it stays in the app's palette family */ --modal-backdrop: rgba(17,24,39,0.28); /* NEW (PRD-062 S1) · THE modal ::backdrop - the palette's, and since Ross's 2026-08-30 ruling (PRD-062 D11) the keymap card's too. Same ink as --overlay-bg and a separate token because the role is different: an image scrim hides what is under it, a modal backdrop must leave the page legible as the context you are jumping from */ /* NEW (PRD-286 D3) · the asset wireframes' "Grey" mode (Figma variable collection "PRD-286 brand roles"): the paint of a brand role a client has not set. Ui::AssetWireframeComponent draws a set role in its hex. */ --wireframe-primary: #707070; --wireframe-secondary: #b4b4b4; --wireframe-accent: #3c3c3c; --wireframe-text: #1f1f1f; --wireframe-background: #f5f5f5; } /* THE AI VISIBILITY REPORT LANDING PAGE (PRD-285 S2, D28, D46; Figma file hP9WwD5Tpup3oa4fGn2EcI, page "PRD-285 Free onboarding", desktop 655:795, mobile 655:1005). The page's one new colour - the light green ground of the hero picture, the demo panel and the closing band - and its marketing type scale, which the staff app's TYPE.md does not cover: a public sales page sets its headings larger than any staff screen. Values read off the two frames. free-analysis.css reads them; nothing else does. */ :root{ --color-mint: #eefbf8; /* the light green panel ground */ --landing-shadow: 0 16px 40px rgba(17,24,39,.1); /* the frames' card lift */ --landing-shadow-soft: 0 12px 32px rgba(17,24,39,.08); /* the demo window */ --landing-focus-glow: rgba(41,207,168,.18); /* the demo's focused field */ --font-size-landing-hero: 52px; /* the desktop headline */ --font-size-landing-hero-sm: 34px; /* the phone headline */ --font-size-landing-close: 44px; /* the closing band, desktop */ --font-size-landing-close-sm: 30px; /* the closing band, phone */ --font-size-landing-faq: 26px; /* a question, desktop */ --font-size-landing-faq-sm: 22px; /* a question, phone */ --font-size-landing-lede: 19px; /* the hero's subline, desktop */ --font-size-landing-lede-sm: 17px; /* the phone's body copy */ --font-size-landing-big: 56px; /* the demo's result figure */ --font-size-landing-micro: 11px; /* the phone lockup's "by Type A Media" */ }