/* =================================================================== ProcIntel V2 — DESIGN TOKENS Stage 1 of the approved V1 UI/UX redesign. THIS FILE DEFINES VALUES. It contains no component styling and no selector other than :root and the two @font-face rules. Anything that styles a thing belongs in components.css or shell.css. LOAD ORDER (dashboard/templates/base.html): 1. style.css <- the V1 legacy stylesheet, untouched 2. css/tokens.css <- this file: fonts + values + the bridge 3. css/components.css <- V2 shared primitives 4. css/shell.css <- V2 application shell TOKENS LOAD AFTER LEGACY, DELIBERATELY. Both files declare on :root, so the later one wins -- which is exactly what lets the bridge at the foot of this file re-theme 6,553 lines of existing rules. Custom properties resolve where they are USED, not where they are declared, so a rule written two years ago picks up the V2 value for free. V2 supersedes the legacy layer by source order rather than by specificity wars or !important. The legacy file is deliberately left in place: 228 existing tests assert literal strings inside it, and every screen still depends on it until its own redesign stage lands. MIGRATION CONTRACT. The V1 tokens in style.css's :root are NOT deleted in Stage 1. A small number are re-pointed at V2 values at the foot of this file, which is what re-themes the legacy screens without editing 6,553 lines of rules. V1 tokens are retired only in the final stage, once nothing references them. CONTRAST. Every pair below was measured, not assumed. Figures are the WORST case across the surface ladder (i.e. against --surface-hover, the lightest ground any of this text sits on). =================================================================== */ /* ------------------------------------------------------------------- TYPEFACES — self-hosted, subset, variable. No Google Fonts and no third-party runtime request: the existing policy against putting a third-party host on the authentication path is correct and is preserved. These files are served from ProcIntel's own static directory. Both are SIL Open Font License 1.1; the licences ship alongside them in dashboard/static/fonts/. They were subset from the upstream Google Fonts sources by dashboard/static/fonts/build_fonts.py, which is a BUILD-TIME script run by hand -- fontTools is not a ProcIntel dependency and is not in requirements.txt. Payload: Inter 33 KB + Manrope 27 KB = 60 KB for every weight the type scale uses, against the 146 KB logo PNG this stage also replaces. The redesign is net lighter. font-display: swap -- text paints immediately in the fallback and reflows once the face arrives. For an intelligence product that must stay readable on a slow connection, invisible text is the worse failure. ------------------------------------------------------------------- */ @font-face { font-family: "Inter"; src: url("../fonts/inter-var.woff2") format("woff2-variations"), url("../fonts/inter-var.woff2") format("woff2"); font-weight: 400 700; /* variable axis, not separate files */ font-style: normal; font-display: swap; } @font-face { font-family: "Manrope"; src: url("../fonts/manrope-var.woff2") format("woff2-variations"), url("../fonts/manrope-var.woff2") format("woff2"); font-weight: 500 800; font-style: normal; font-display: swap; } :root { /* ----------------------------------------------------------------- SURFACE LADDER — five levels, deliberately close together. A dark interface that is one flat colour reads as cheap; one with violent steps reads as a set of boxes. Adjacent levels here sit between 1.06 and 1.17 contrast -- perceptible as depth, never as a border in their own right. ----------------------------------------------------------------- */ --surface-base: #080B11; /* 0 - application background */ --surface-shell: #0E141C; /* 1 - sidebar, header */ --surface-panel: #141B26; /* 2 - workspace panels and cards */ --surface-raised: #1F2836; /* 3 - elevated card, active row */ --surface-hover: #28323F; /* 4 - hover and selected */ --surface-inset: #05080C; /* wells, inputs, code -- below base */ /* Translucent washes, for tinting a surface without inventing a new opaque colour for every state. */ --wash-accent: rgba(201, 169, 97, 0.10); --wash-critical: rgba(224, 108, 96, 0.12); --wash-warning: rgba(224, 164, 88, 0.12); --wash-positive: rgba(91, 174, 134, 0.12); --wash-info: rgba(107, 163, 214, 0.12); --wash-neutral: rgba(148, 163, 184, 0.10); /* ----------------------------------------------------------------- BORDERS — three weights, one colour family. Low contrast on purpose: in the mockup, separation comes from surface shift first and a hairline second. ----------------------------------------------------------------- */ --border-subtle: #171F2A; /* row separators inside a panel */ --border-default: #222C3A; /* panel and control edges */ --border-strong: #33404F; /* focus-adjacent, active edges */ /* ----------------------------------------------------------------- TEXT — measured against --surface-hover, the lightest ground. ----------------------------------------------------------------- */ --text-primary: #E8E6E1; /* 12.6:1 - warm off-white, not #FFF */ --text-secondary: #A7B3C2; /* 7.0:1 - supporting prose, metadata */ --text-muted: #94A2B0; /* 5.0:1 - labels; still AA for body */ --text-inverse: #080B11; /* on gold and on light report surfaces */ --text-disabled: #5A6674; /* non-interactive only, never content */ /* ----------------------------------------------------------------- PROCINTEL GOLD — the brand accent, and deliberately scarce. Permitted uses, and no others: 1. the active navigation indicator; 2. ProcIntel's own proprietary intelligence (PRI, assessments); 3. a primary action; 4. a selected/high-value emphasis. 8.8:1 on base, so it is legible as text -- but it is still used as text only for short emphasis, never for running body copy. ----------------------------------------------------------------- */ --accent-primary: #C9A961; --accent-hover: #DCBF7E; --accent-pressed: #B0904B; --accent-muted: #8A7440; /* rules and borders that should be quiet */ --accent-on: var(--text-inverse); /* text ON a gold fill */ /* ----------------------------------------------------------------- STATUS — semantic only. A colour here means something. Nothing is tinted merely to add variety, and colour is never the sole carrier of meaning: every status treatment in components.css pairs it with a written label. ----------------------------------------------------------------- */ --status-critical: #E06C60; --status-warning: #E0A458; --status-positive: #5BAE86; --status-info: #6BA3D6; --status-neutral: #94A3B8; /* ----------------------------------------------------------------- PROVENANCE — ProcIntel's trust architecture, which the audit identified as a genuine asset to preserve and strengthen. Four distinguishable channels. These are NOT the status colours reused: a fact is not "good" and an assessment is not "info", and borrowing the status palette would imply a judgement the provenance system does not make. Stage 1 defines the values and the chip/rule treatments. The screens that consume them are redesigned in their own stages, and no underlying semantics change at any point. ----------------------------------------------------------------- */ --provenance-fact: #8FA3B8; /* what a source reported */ --provenance-metric: #7FC4D9; /* deterministic ProcIntel figure */ --provenance-assessment: #C9A961; /* AI procurement interpretation */ --provenance-synthesis: #A98BC7; /* DI situation synthesis */ /* ----------------------------------------------------------------- TYPOGRAPHY ----------------------------------------------------------------- */ --font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* A deliberate scale. Density comes from line-height and spacing, not from shrinking everything to 11px -- the smallest size here is a label, and body text stays at a comfortable 14px. */ --fs-page-title: 30px; /* the one

on a screen */ --fs-headline: 21px; /* an intelligence headline */ --fs-section: 17px; /* section heading */ --fs-card-title: 15px; /* card/panel title */ --fs-body: 14px; /* running text */ --fs-meta: 13px; /* supporting metadata */ --fs-data: 13px; /* figures in tables (with tabular-nums) */ --fs-label: 11px; /* uppercase label, letterspaced */ --fs-caption: 12px; /* caption, helper text */ --fs-micro: 10px; /* badge text only */ --lh-tight: 1.18; /* display and headlines */ --lh-snug: 1.35; /* titles, dense rows */ --lh-normal: 1.55; /* body */ --lh-relaxed: 1.65; /* long-form reading */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --tracking-label: 0.08em; /* uppercase labels need air */ --tracking-tight: -0.011em; /* large display sizes need less */ /* ----------------------------------------------------------------- SPACING — a 4px-rooted scale. The names are sizes, not roles, so one scale serves padding, gaps and margins alike. ----------------------------------------------------------------- */ --sp-0: 0; --sp-1: 2px; --sp-2: 4px; --sp-3: 6px; --sp-4: 8px; --sp-5: 12px; --sp-6: 16px; --sp-7: 20px; --sp-8: 24px; --sp-9: 32px; --sp-10: 40px; --sp-11: 48px; --sp-12: 64px; /* Composite spacing, so a change of rhythm is one edit rather than forty. */ --page-gutter: var(--sp-8); --page-gutter-sm: var(--sp-6); --section-gap: var(--sp-9); --panel-padding: var(--sp-7); --card-padding: var(--sp-6); --row-padding-y: var(--sp-5); --control-gap: var(--sp-4); --meta-gap: var(--sp-5); /* ----------------------------------------------------------------- RADII — restrained. Controls are nearly square; panels are softly rounded; nothing is a consumer-app pill except a status chip, where the shape itself carries meaning. ----------------------------------------------------------------- */ --radius-xs: 3px; /* badges, chips */ --radius-sm: 5px; /* buttons, inputs, filters */ --radius-md: 8px; /* cards, panels */ --radius-lg: 12px; /* drawers, modals, large containers */ --radius-pill: 999px; /* status chips only */ /* ----------------------------------------------------------------- ELEVATION — used sparingly. On a dark ground a shadow reads as a smudge, so the shell relies on surface shift and hairlines. These are for things that genuinely float above the page. ----------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.36); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.44); --shadow-none: none; /* A one-pixel top highlight, the cheapest way to make an elevated dark surface read as lit from above rather than as a lighter box. */ --sheen-top: inset 0 1px 0 rgba(255, 255, 255, 0.035); /* ----------------------------------------------------------------- MOTION — fast, and it must mean something. Every duration here is under a quarter-second except a deliberate drawer slide. ----------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95); --dur-instant: 90ms; --dur-fast: 140ms; --dur-base: 190ms; --dur-slow: 260ms; --motion-hover: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); /* ----------------------------------------------------------------- LAYOUT ----------------------------------------------------------------- */ --rail-width: 236px; --rail-width-collapsed: 68px; --topbar-height: 56px; --focus-ring: 2px solid var(--accent-primary); --focus-offset: 2px; /* ----------------------------------------------------------------- RESPONSIVE — four breakpoints, replacing fourteen ad-hoc ones. Recorded here as documentation; @media cannot read a custom property, so shell.css repeats the literal values and cites these names beside them. --bp-sm 640px phone -> large phone --bp-md 900px tablet; the rail becomes an overlay drawer --bp-lg 1180px small laptop; the rail collapses to icons --bp-xl 1440px full desktop workspace ----------------------------------------------------------------- */ --bp-sm: 640px; --bp-md: 900px; --bp-lg: 1180px; --bp-xl: 1440px; } /* =================================================================== LEGACY BRIDGE. These re-point V1 token names at V2 values. This is what carries the new palette across 6,553 lines of existing rules and 71 templates without editing them -- and it is why Stage 1 can change how the whole product looks while each screen's own redesign is still ahead of it. Only tokens whose MEANING is unchanged are bridged. Anything whose meaning differs is left alone and handled in its screen's own stage. The V1 names stay defined in style.css; these win by source order. =================================================================== */ :root { --ink: var(--text-primary); --ink-muted: var(--text-secondary); --border: var(--border-default); /* --border-subtle is DELIBERATELY NOT BRIDGED. It is already defined with its V2 value in the :root above, which wins over legacy style.css by source order. This block used to redeclare it as `var(--border-subtle)` -- a reference to itself. A self-referencing custom property is invalid, so the token computed to nothing and every "subtle" hairline in the product silently rendered in the current TEXT colour instead: row separators, section rules and the sidebar edge were bright lines. Found by measuring a chart track that resolved to its light fallback (V1 Premium UX). */ --bg: var(--surface-base); --page-bg: var(--surface-base); --page-bg-deep: var(--surface-inset); --panel: var(--surface-panel); --header-bg: var(--surface-shell); --header-fg: var(--text-primary); --accent: var(--text-secondary); --brand: var(--accent-primary); --brand-soft: var(--wash-accent); /* --navy is DELIBERATELY NOT BRIDGED. It carries two incompatible meanings in V1: a dark FILL (11 rules, including three on the frozen sign-in page and three paired with `color: #fff`) and an emphasis TEXT colour (10 rules). No single value serves both -- re-pointing it at a light colour turns the sign-in page's navy brand panel cream, and leaving it dark makes ten pieces of text invisible on the new ground. So it keeps its V1 value, the fills stay correct, and components.css re-colours the ten text uses by name. */ --gold: var(--accent-primary); --gold-dark: var(--accent-muted); --blue: var(--status-info); --success: var(--status-positive); --success-bg: var(--wash-positive); --success-border: var(--status-positive); --caution: var(--status-warning); --caution-bg: var(--wash-warning); --caution-border: var(--status-warning); --danger: var(--status-critical); --danger-bg: var(--wash-critical); --danger-border: var(--status-critical); --neutral: var(--status-neutral); --neutral-bg: var(--wash-neutral); --neutral-border: var(--border-default); --warn-bg: var(--wash-critical); --warn-border: var(--status-critical); --risk-bg: var(--wash-critical); --risk-border: var(--status-critical); --blue-bg: var(--wash-info); --blue-border: var(--status-info); --cream-bg: var(--wash-accent); --cream-border: var(--accent-muted); --real: var(--status-positive); --fictional: var(--status-warning); /* PRI bands keep their established five-way ordering and their separately-documented meaning; only the hex values move onto the dark ground. */ --band-critical: var(--status-critical); --band-high: var(--status-warning); --band-medium: var(--status-info); --band-watch: var(--status-neutral); --intelligence-highlight: var(--accent-primary); --intelligence-highlight-bg: var(--wash-accent); --intelligence-highlight-border: var(--accent-muted); --shadow-card: var(--shadow-sm); --shadow-hover: var(--shadow-md); --shadow-menu: var(--shadow-lg); --shadow-tooltip: var(--shadow-md); }