/* ========================================================================== PolicyViewer V5 design tokens -------------------------------------------------------------------------- The single source of truth for colour, type, radius, elevation and motion across every PolicyViewer surface (public, admin, management, site dashboard). Loaded first from page-template.html so that every later sheet — and per-deployment overrides in site.css — can consume or re-point these custom properties. Two tiers live here: 1. Canonical tokens (--pv-ink, --pv-action, --pv-ok, …): the V5 palette. New CSS should use these. 2. Legacy aliases (--pv-blue, --pv-text, --pv-action-primary-*, …): the names the existing per-area sheets already consume, re-pointed at the canonical values so the whole product shifts palette together. Do not add new consumers of the legacy names. Colour contrast (#2447): measured, WCAG 2.x relative luminance. ink-3 #5B6C78 is the muted text tone: 5.44:1 on --pv-surface, 5.02:1 on --pv-paper (the two grounds it renders on in the browser), 5.20:1 on --pv-row-hover, and 4.55-4.81:1 on the status/action tints, the weakest being --pv-danger-tint at 4.55:1. It replaces #71828E, which measured 3.97:1 on surface and 3.67:1 on paper while this comment claimed 4.5:1. There is no dark theme, so there is no dark counterpart to measure. Azure is decorative/focus only, never body text. ========================================================================== */ :root { /* --- canonical: neutrals ------------------------------------------- */ --pv-ink: #1F2D3A; --pv-ink-2: #51626E; --pv-ink-3: #5B6C78; --pv-paper: #F4F6F8; --pv-surface: #FFFFFF; --pv-line: #DCE3E9; --pv-line-strong: #C9D3DB; --pv-row-hover: #F8FAFC; /* --- canonical: action + brand ------------------------------------- */ --pv-action: #186FAF; --pv-action-hover: #125C93; --pv-action-tint: #E7F1F8; --pv-azure: #2090D0; /* brand mark, focus rings, progress — not text */ --pv-azure-tint: #E5F2FA; /* --- canonical: status --------------------------------------------- */ --pv-ok: #1D7A44; --pv-ok-tint: #E2F2E8; --pv-warn-ink: #8A5A06; --pv-warn-icon: #C07C08; --pv-warn-tint: #FBF0D9; --pv-danger: #A81236; /* brand crimson, tamed to a text-safe alarm */ --pv-danger-tint: #FAE6EB; --pv-info-ink: #14567F; --pv-info-tint: #E5F2FA; /* --- canonical: type ------------------------------------------------ */ --pv-font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif; --pv-font-doc: Charter, "Iowan Old Style", Georgia, "Times New Roman", serif; --pv-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* --- canonical: shape, elevation, motion --------------------------- */ --pv-radius-card: 10px; --pv-radius-control: 8px; /* #2966 (Kevin, 11 Nov 2026): the height Publish changes and Discard changes render at, and so the height of EVERY button and link-button. */ --pv-control-height: 40px; --pv-radius-pill: 999px; --pv-shadow-card: 0 1px 2px rgba(23, 43, 58, 0.05), 0 2px 10px rgba(23, 43, 58, 0.06); --pv-shadow-lift: 0 4px 14px rgba(23, 43, 58, 0.09); --pv-dur: 160ms; --pv-ease: cubic-bezier(0.2, 0.7, 0.3, 1); --pv-focus-ring: 2px solid var(--pv-azure); --pv-focus-offset: 2px; /* --- canonical: layout --------------------------------------------- */ --pv-content-max: 1240px; --pv-policy-nav-width: 300px; /* The console rail's width, and therefore the offset every other piece of console chrome needs to clear it. One value rather than the nine copies this replaces: navigation labels are translated, and a language that needs more room should be one number to change, not a hunt. The labels already wrap (white-space: normal), so widening is a comfort decision rather than a correctness one — 260px is the tested next step up. */ --pv-console-rail: 236px; /* --- canonical: direction ------------------------------------------ */ /* +1 under LTR, -1 under RTL. Logical properties mirror on their own; a handful of things cannot, because they take a signed physical x-offset rather than a side: inset box-shadow accents, translateX nudges, and gradient angles. Multiply those by --pv-dir and they follow the reading direction without a per-rule override. Not for offsets that are genuinely physical. A drawing that must look the same in every locale — the clock icon's hands, the licence spinner's gap, the dashboard ring's clockwise sweep — keeps its plain physical value on purpose. */ --pv-dir: 1; /* --- legacy aliases (consumed by existing sheets) ------------------ */ --pv-blue: var(--pv-action); --pv-blue-dark: var(--pv-action-hover); --pv-red: var(--pv-danger); --pv-green: var(--pv-ok); --pv-warning: var(--pv-warn-icon); --pv-admin-strip: #152230; --pv-text: var(--pv-ink); --pv-muted: var(--pv-ink-2); --pv-border: var(--pv-line); --pv-row: var(--pv-paper); --pv-page-bg: var(--pv-paper); --pv-panel-bg: var(--pv-surface); --pv-radius: var(--pv-radius-card); --pv-shadow: var(--pv-shadow-card); --pv-action-gap: 0.45rem; --pv-action-min-height: var(--pv-control-height); --pv-action-padding: 0.55rem 0.95rem; --pv-action-radius: var(--pv-radius-control); --pv-action-primary-color: #ffffff; --pv-action-primary-bg: var(--pv-action); --pv-action-primary-border: var(--pv-action); --pv-action-primary-hover-bg: var(--pv-action-hover); --pv-action-primary-hover-border: var(--pv-action-hover); --pv-action-cancel-color: var(--pv-ink); --pv-action-cancel-bg: var(--pv-danger-tint); --pv-action-cancel-border: #EFC3CF; --pv-action-cancel-hover-bg: #F5D8E0; --pv-action-cancel-hover-border: #E3A8B8; --pv-action-danger-color: #ffffff; --pv-action-danger-bg: var(--pv-danger); --pv-action-danger-border: #8E0F2F; --pv-action-danger-hover-bg: #8E0F2F; --pv-action-danger-hover-border: #760B29; --pv-action-neutral-color: var(--pv-info-ink); --pv-action-neutral-bg: var(--pv-surface); --pv-action-neutral-border: var(--pv-line-strong); --pv-action-neutral-hover-color: var(--pv-action-hover); --pv-action-neutral-hover-bg: var(--pv-action-tint); --pv-action-neutral-hover-border: var(--pv-azure); --pv-feedback-success-color: #175E37; --pv-feedback-success-bg: var(--pv-ok-tint); --pv-feedback-success-border: #BFE3CC; --pv-feedback-error-color: #8E0F2F; --pv-feedback-error-bg: var(--pv-danger-tint); --pv-feedback-error-border: #F0C3D0; --pv-feedback-info-color: var(--pv-info-ink); --pv-feedback-info-bg: var(--pv-info-tint); --pv-feedback-info-border: #C6E2F2; /* --- the one select chevron (owner, 31 Oct 2026, Brickhill findings) -- Drawn by the product rather than the browser so its gap to the border is ours: Chromium's native arrow sat ~6px from the edge regardless of the control's padding. Stroke is --pv-ink-2 (#51626E). */ --pv-select-chevron: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8" fill="none" stroke="%2351626E" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="1.5 1.5 6 6 10.5 1.5"/%3E%3C/svg%3E'); --pv-select-chevron-inset: 12px; --pv-select-chevron-space: 34px; } /* SiteHTMLShellComposer stamps dir on from the request locale, so the attribute selector is enough and :dir() is not needed. Both directions are declared, not just RTL, so that a nested dir="ltr" run — a ticket number or an email address isolated inside an RTL sentence — resets the sign for anything drawn inside it. */ [dir="rtl"] { --pv-dir: -1; } [dir="ltr"] { --pv-dir: 1; } /* Motion collapses to imperceptible durations when the user asks for less. */ @media (prefers-reduced-motion: reduce) { :root { --pv-dur: 0.01ms; } }