/* RedLens design tokens + core components. Served at /assets/redlens-tokens.css. Source of truth for the app's visual language. Loaded by static/index.html (the dashboard) BEFORE /assets/index.css, which builds every view on it. How this file came to be (2026-11): EXTRACTED, not invented. Section 2 is the :root block that used to open index.css, lifted verbatim (same names, same values) plus the 2026-10-10 R7 contrast override of --text3 that sat 1,260 lines further down. Section 3 names the colours index.css used to hardcode, each at its exact existing value. Sections 4-8 add the scales that were missing. The dark navy identity is unchanged: no palette values moved. Rules - New CSS uses tokens, never raw hex / px font sizes / ad-hoc radii. tests/test_design_tokens.py fails the build if index.css regains a raw hex. - Reach for a semantic token (--text2, --red-fg, --radius-md) before a primitive value. Add a token here rather than a one-off in index.css. - Component base styles live in section 10; view-specific variations stay in index.css (which loads after this file, so it can always refine them). Marketing pages load sections 1-9 only, via /assets/redlens-tokens-core.css (sliced from this file by the server at the section 10 marker), because the component class names below collide with website.css. See static/css/redlens-marketing.css. Contents 1 Fonts (self-hosted Manrope + JetBrains Mono, OFL; see static/fonts/OFL-*.txt) 2 Core palette (the original :root) 3 Named colours (formerly hardcoded in index.css) 4 Type scale 5 Spacing scale (4px base) 6 Radius set 7 Elevation / shadows 8 Motion 9 Reduced-motion off-switch 10 Components: nav, buttons, section shell, cards, stat cards, badges, fields */ /* ── 1. FONTS ─────────────────────────────────────────────────────────────── Self-hosted variable fonts (one file per subset covers every weight, so the 650 weight used by .badge-alert renders as a true weight, not a synthesis). Before this, both families came from fonts.googleapis.com; any network that blocks Google (on-prem installs, strict egress, offline demos) silently fell back to the generic sans-serif / monospace. */ @font-face{font-family:"Manrope";font-style:normal;font-display:swap;font-weight:200 800; src:url(/assets/fonts/manrope-latin-wght-normal.woff2) format("woff2-variations"),url(/assets/fonts/manrope-latin-wght-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Manrope";font-style:normal;font-display:swap;font-weight:200 800; src:url(/assets/fonts/manrope-latin-ext-wght-normal.woff2) format("woff2-variations"),url(/assets/fonts/manrope-latin-ext-wght-normal.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:100 800; src:url(/assets/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations"),url(/assets/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:100 800; src:url(/assets/fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format("woff2-variations"),url(/assets/fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} :root{ color-scheme:dark; /* ── 2. CORE PALETTE (lifted verbatim from index.css :root) ───────────── */ /* surfaces */ --black:#050A14; --bg:#050A14; --nav:#050A14; --nav2:#0A1628; --navy:#0A1628; --card:#0A1628; --navy2:#0F1F35; --navy3:#162640; --nav-b:rgba(255,255,255,.07); --border:rgba(255,255,255,.07); --border2:rgba(255,255,255,.13); /* text. --text3 was #64748B in the :root block; the 2026-10-10 refresh pass (R7) overrode it to #74839A further down index.css so hint / sub / meta text reads 4.6:1 on a card (WCAG AA small text). That override is what shipped, so it is the value here; the old one is kept as --slate-500. */ --text:#F8FAFC; --text2:#94A3B8; --text3:#74839A; /* brand + tones, each with tint (-bg), border (-b) and glow variants */ --blue:#2B6DEF; --blue2:#4B8BFF; --blue-bg:rgba(43,109,239,.12); --blue-b:rgba(43,109,239,.32); --blue-glow:rgba(43,109,239,.22); --red:#F55050; --red2:#F87171; --red-bg:rgba(245,80,80,.1); --red-b:rgba(245,80,80,.3); --red-glow:rgba(245,80,80,.22); --green:#4ADE80; --green-bg:rgba(74,222,128,.1); --green-b:rgba(74,222,128,.3); --green-glow:rgba(74,222,128,.2); --amber:#F59E0B; --amber-bg:rgba(245,158,11,.1); --amber-b:rgba(245,158,11,.3); --purple:#A78BFA; --purple-bg:rgba(167,139,250,.12); --purple-b:rgba(167,139,250,.32); --purple-glow:rgba(167,139,250,.22); /* card elevation, card radius, families (unchanged names; see 6-7 for the full sets) */ --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 28px rgba(0,0,0,.4); --r:12px; --font:"Manrope",sans-serif; --mono:"JetBrains Mono",monospace; /* ── 3. NAMED COLOURS (exact values that index.css used to hardcode) ───── */ --white:#FFFFFF; --slate-500:#64748B; /* the pre-R7 --text3; copilot meta text still uses it */ /* light "on-tint" text: the readable foreground on a -bg tint of the same tone */ --red-fg:#FCA5A5; --amber-fg:#FCD34D; --green-fg:#86EFAC; --blue-fg:#93C5FD; --notice-fg:#BFDBFE; --trial-fg:#8FB3FF; /* deep stops: the darker end of the tone gradients (stat-card bars, primary button) */ --blue-deep:#1D4ED8; --red-deep:#EF4444; --green-deep:#22C55E; --amber-deep:#D97706; --purple-deep:#8B5CF6; --green-hover:#3FD075; /* live-making "promote" button hover */ --green-ink:#06210F; /* text on a solid --green button */ /* extra hues used once each, named so they are findable */ --sky:#60A5FA; /* "connecting" status dot */ --sky-deep:#0EA5E9; /* MITRE ATLAS framework bar, from */ --teal:#14B8A6; /* MITRE ATLAS framework bar, to */ --orange:#FB923C; /* partner severity tag: high */ /* marketing pages (solutions + compare, 2026-11): the two values they used that the dashboard palette lacked, at their exact shipped values */ --blue3:#6BA3FF; /* light accent text: eyebrows, the RedLens column */ --text-hi:#E2E8F0; /* emphasised body text, card titles on marketing pages */ /* MSSP acting-as-client chrome: high-contrast amber, deliberately off-palette */ --acting:#D98324; --acting-fg:#E8A04A; --acting-ink:#1A1205; --acting-banner-from:#7A4A00; --acting-banner-to:#B46A00; /* diff viewer (curation queue, idea builds) */ --diff-del-fg:#E79A9A; --diff-add-fg:#7FDCA0; --diff-del-hi:#FECACA; --diff-add-hi:#BBF7D0; /* RedLens Copilot side panel: its own slightly cooler neutral ramp */ --cp-bg-top:#0C1A31; --cp-bg-bottom:#091427; --cp-bubble:#132645; --cp-text:#CBD5E1; --cp-text-hi:#F1F5F9; --cp-text-hover:#E2E8F0; --cp-code:#C7D7F0; --cp-tag:#B6C6DE; --cp-label:#8FA3BF; --cp-muted:#7C8BA3; --cp-faint:#5B6B82; --cp-accent:#9CC0FF; --cp-link:#7FA6F5; /* semantic status aliases. index.js already wrote var(--danger), var(--warn), var(--success) and var(--surface), but nothing defined them, so the endpoint-test result never turned red/green. They now resolve. */ --danger:var(--red); --warn:var(--amber); --success:var(--green); --surface:var(--card); /* ── 4. TYPE SCALE ────────────────────────────────────────────────────── Before: ~30 ad-hoc sizes from 7px to 40px. The dashboard is dense, so the small end steps by 1px; --fs-body (13.5px) is the body copy size. Former half-pixel sizes moved UP to the next step (10.5 -> 11, 11.5 -> 12, 12.5 -> 13) for legibility. */ --fs-3xs:8px; /* tiny chips inside avatars, beta pills */ --fs-2xs:9px; /* uppercase micro labels */ --fs-xs:10px; /* badges, nav section labels, hints */ --fs-sm:11px; /* meta, sub text, table secondary */ --fs-md:12px; /* controls, table cells */ --fs-base:13px; /* nav items, card titles, modal body */ --fs-body:13.5px; /* body copy */ --fs-lg:14px; --fs-xl:16px; /* section + modal titles */ --fs-2xl:18px; --fs-3xl:22px; /* view titles, big numbers in tiles */ --fs-4xl:26px; --fs-5xl:30px; /* stat values */ --fs-6xl:34px; --fs-7xl:40px; /* hero metric */ --lh-tight:1.15; --lh-snug:1.35; --lh-normal:1.5; --lh-relaxed:1.65; --tracking-tight:-.02em; --tracking-caps:.08em; /* ── 5. SPACING SCALE (4px base) ───────────────────────────────────────── */ --space-0:0; --space-px:1px; --space-0-5:2px; --space-1:4px; --space-1-5:6px; --space-2:8px; --space-2-5:10px; --space-3:12px; --space-3-5:14px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; /* ── 6. RADIUS SET ────────────────────────────────────────────────────── Before: 20+ values (2,3,4,5,6,7,8,9,10,11,12,14,16,18,20,999px...). Consolidated to nine; --r stays as the card radius (= --radius-xl). */ --radius-2xs:2px; /* bars, meters */ --radius-xs:4px; /* tags, micro chips */ --radius-sm:6px; /* inputs, small chips, badges */ --radius-md:8px; /* buttons, nav items */ --radius-lg:10px; /* toasts, pills with text */ --radius-xl:12px; /* cards (= --r) */ --radius-2xl:14px; /* modals, side panels */ --radius-3xl:16px; /* large hero panels */ --radius-pill:999px; --radius-round:50%; /* ── 7. ELEVATION / SHADOWS ────────────────────────────────────────────── */ --elev-0:none; --elev-1:var(--shadow); /* cards, stat cards */ --elev-2:0 12px 32px rgba(0,0,0,.45); /* toasts, menus, popovers */ --elev-3:0 30px 80px rgba(0,0,0,.6); /* modals, command palette */ --elev-drawer:0 0 60px rgba(0,0,0,.6); /* off-canvas sidebar */ --glow-blue:0 8px 28px var(--blue-glow); --glow-red:0 8px 28px var(--red-glow); --glow-green:0 8px 28px var(--green-glow); --glow-amber:0 8px 28px rgba(245,158,11,.18); --glow-purple:0 8px 28px var(--purple-glow); --glow-btn:0 3px 14px var(--blue-glow); --ring-focus:0 0 0 3px var(--blue-glow); /* focused inputs */ --outline-focus:2px solid var(--blue-b); /* focus-visible outline */ /* ── 8. MOTION ────────────────────────────────────────────────────────── Before: .12 .14 .15 .16 .18 .2 .22 .25 .3 .32 .35 .4 .5 .7s. Snapped to four durations and two curves. Infinite loops (spinners, pulses, shimmer) keep their own periods: those are rhythms, not transition speed. */ --dur-fast:.15s; /* hovers, colour/border changes */ --dur-base:.2s; /* lifts, small transforms */ --dur-slow:.3s; /* panels, disclosures, entrances */ --dur-slower:.7s; /* progress bars filling */ --ease-standard:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.2,.8,.2,1); } /* ── 9. REDUCED-MOTION OFF-SWITCH ───────────────────────────────────────── One switch for the whole app: transition tokens drop to zero, every animation runs once in no time (entrances land on their end state, loops stop), and smooth scrolling is off. The few view-specific reduce rules in index.css remain for things that change layout, not just motion. */ @media (prefers-reduced-motion:reduce){ :root{--dur-fast:0s;--dur-base:0s;--dur-slow:0s;--dur-slower:0s} *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:0s!important;transition-delay:0s!important;scroll-behavior:auto!important} }