/* public/css/vision360-tokens.css * * Vision360™ canonical token layer (Round 3). * * Lifted verbatim from the :root block that used to live at the top of * public/css/vision360-design-system.css. This file contains ONLY the * --v360-* custom properties (brand, status, surface, border, text, * semantic, typography, radii, content-max). No component rules, no * body rules, no font-family declarations beyond the typography token * custom properties. * * Loaded: * - Implicitly on every page that loads the design system, via the * @import at the top of vision360-design-system.css. * - Explicitly on the pages that do NOT load the design system, * via as * the first stylesheet link in their . * * Changing a single hex value in the raw palette below is the one edit * a future re-theme needs. The semantic layer cascades from the raw * palette, and the alias :root blocks in style.css and admin.css * cascade from the semantic layer. */ /* BRAND-01 (inert): central load for the brand's three editorial families, * available app-wide through this token file (imported by * vision360-design-system.css and linked directly on the one page that loads * neither). This makes Cormorant Garamond / Archivo / Spectral AVAILABLE; * nothing references them yet. @import must precede :root, which it does. * Weights match the brand file Part II load (display + body italics carried * for later use). */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Spectral:ital,wght@0,400;0,500;1,400;1,500&display=swap'); :root { /* ========================================================================= * Raw brand palette. These are the canonical hex values for the brand; * everything else in the token layer (semantic roles, legacy aliases in * style.css and admin.css) cascades from here. Changing a single hex * value below is now the one edit a future re-theme needs. * ========================================================================= */ /* Brand-file palette (Round T). Blue is the structural and primary * colour (provenance: the ISI company mark); blue-light is the secondary; * terracotta is the sparing accent and the human / Viv colour. These are * the canonical brand colours from this round on. */ --v360-blue: #0B5AA6; /* structural / primary */ --v360-blue-light: #2C7CBF; /* secondary */ --v360-blue-lighter: #5599D0; /* lightest structural (gradient ends, hovers) */ --v360-blue-dark: #094B8A; /* pressed / deep structural */ --v360-terracotta: #A76A4F; /* sparing accent / human colour */ --v360-terracotta-light: #C68A63; /* lighter accent (hover-bright) */ --v360-terracotta-dark: #8C5740; /* accent hover / pressed */ /* Status palette (raw). VE-1: corrected to the brand's muted, warm-tuned set * (Vision360-Brand-System.md): success #2F7D5B, warning #B07A2E, danger * #B23A2F; info reads as the structural blue. --v360-danger tokenizes the * destructive red (was a hardcoded #b3261e fallback). */ --v360-success: #2F7D5B; --v360-warning: #B07A2E; --v360-error: #B23A2F; --v360-danger: #B23A2F; --v360-info: var(--v360-blue); --v360-purple: #5A2D5C; /* Surface palette (raw). */ --v360-bg-page: #FAFAF8; --v360-bg-card: #FFFFFF; --v360-bg-warm: #FFFCF5; --v360-bg-cool: #FAFAF8; --v360-bg-input: #FFFFFF; /* Excel convention carried into the sheets: a faint yellow means "type here". Applied only to user-entry inputs (e.g. the Good Money sheet); derived / readonly displays keep the white --v360-bg-input. Faint but visible, and near-black ink stays fully legible on it. */ --v360-input-userentry: #FCF3D4; --v360-bg-disabled: #F2EFE6; /* Border palette (raw). */ --v360-border: #E5E2D8; --v360-border-light: #F2EFE6; --v360-border-strong: #C5C0B0; /* Text palette (raw). */ --v360-text-primary: #1A1714; /* warm near-black ink (Round T: was navy #0D1B2A) */ --v360-text-secondary: #5A6478; --v360-text-muted: #8B7355; --v360-text-error: #5A2D2D; /* ========================================================================= * Semantic token layer. These are the roles components reach for; the * raw palette above is the implementation. A future re-theme changes * the right-hand side here without touching component CSS. * * Component CSS may still reach for the raw tokens it always has * (--v360-blue, --v360-terracotta, --v360-bg-page, --v360-text-primary, * etc.) because the raw token names are already semantic enough for the * existing call sites. New CSS should prefer the semantic role * names below. * ========================================================================= */ --v360-surface-page: var(--v360-bg-page); /* the page background */ --v360-surface-card: var(--v360-bg-card); /* card / panel surface */ --v360-surface-raised: var(--v360-bg-warm); /* hovers, raised tiles, warm callouts */ --v360-brand-primary: var(--v360-blue); /* primary brand colour: blue (Round T) */ --v360-brand-accent: var(--v360-terracotta); /* accent brand colour: terracotta (Round T) */ /* text-primary, text-secondary, text-muted, border, border-strong are already semantic names; the raw palette tokens above ARE the semantic tokens for those roles. */ /* Status tokens: --v360-success / --v360-warning / --v360-error / --v360-info already serve as the semantic roles. */ /* Typography. */ --v360-font-serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif; /* BRAND-02: the UI sans is now Archivo (the brand's label/control/cell face), * IBM Plex Sans retained as a like-for-like fallback. This one edit flips every * token-driven surface app-wide. Per-area CSS that hard-codes 'IBM Plex Sans' * is repointed in its own BRAND-02b..f round (the dense surfaces). */ --v360-font-sans: 'Archivo', 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --v360-font-mono: 'IBM Plex Mono', 'Courier New', monospace; /* BRAND-01 (inert): the brand's editorial type-role tokens, DEFINED BUT NOT * YET APPLIED. No rule references either this round; they are the raw * material for the forward plan: * --v360-font-display -> page titles + big metric VALUES only (EH-04 pilot, * then BRAND-02 splits the h1-h4 blanket so only the page-title h1 uses it). * --v360-font-read -> long-form reading only (AI output, doc previews, * prose panels) in BRAND-03. * The UI sans (--v360-font-sans) flips IBM Plex -> Archivo app-wide in BRAND-02; * it stays IBM Plex Sans here. -serif/-mono and the h1-h4 serif rule unchanged. */ --v360-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --v360-font-read: 'Spectral', Georgia, serif; /* Spacing / sizing. */ --v360-radius-sm: 2px; --v360-radius: 3px; --v360-radius-pill: 100px; /* Layout. */ --v360-content-max: 1280px; /* W1 commit A: the single shell bound shared by the navy nav band's * inner wrapper and the page's
on every app surface. Tuning * this one token re-flows every surface in lockstep, which is the * whole point of the unification. Generous: effectively edge to * edge on a normal monitor, capping only very wide ones. */ --v360-shell-max: 1760px; --v360-shell-gutter: 32px; /* ========================================================================= * State palettes (Round 4 single-sourcing). * * These tokens collect the categorical colours that previously lived as * raw hex in the engagement-list legend, the deliverable-state legend and * the server-side STATE_COLOR map. They are single-sourced so a future * adjustment is one edit per row; values are preserved exactly from the * earlier ad-hoc literals. Some are off the brand palette and are flagged * in the Round 4 commit message for a later decision. * * Engagement-state palette. Live border bar on each engagement row in * /engagements + the matching legend swatch on the list page. The draft * and unknown-status fallback values stay as raw hex in the server map * (they are not in the named token set). * ========================================================================= */ --v360-state-active: #B8A9D9; /* off-palette: lavender */ --v360-state-dno: #CC0000; /* off-palette: saturated web red */ --v360-state-recessed: #F19C9C; /* off-palette: pink */ --v360-state-final: #3C9A5F; /* off-palette: web green */ --v360-state-sgs: #D9C9A3; /* off-palette: tan */ /* Deliverable-state palette. Silo-bar segments on the Atlas insight * panel + the matching legend swatches. The "not yet" live rule at * insight.html:372 currently uses var(--v360-border-light) and is left * alone this round; --v360-deliv-notyet matches the legend swatch * value only, preserving a pre-existing live-vs-legend disagreement * that this round did not introduce. * ========================================================================= */ --v360-deliv-developed: #7FBC75; /* on palette: same as --v360-success */ --v360-deliv-partial: #F5C842; /* off-palette: warmer gold than --v360-warning */ --v360-deliv-indev: #FCEFA1; /* off-palette: pale yellow */ --v360-deliv-cor: #E8DCC4; /* off-palette: warm tan */ --v360-deliv-recess: #9B2C2C; /* off-palette: deep web red */ --v360-deliv-notyet: #E5E2D8; /* matches the legend swatch; on palette as --v360-border */ }