/* ========================================================================== PPS Design System — Tokens -------------------------------------------------------------------------- Single source of truth for color, type, spacing, geometry, motion. Replaces the legacy :root blocks in capa-dashboard.html and dcm-dashboard.html. Integration: Load BEFORE any other stylesheet so legacy rules can reference these. Legacy aliases (--blue, --primary, --accent, --g500, etc.) are preserved in the second :root block so existing CSS continues to work on day 1 of the migration. Remove an alias once both dashboards reference --pps-* directly. Final state: the legacy block disappears entirely. ========================================================================== */ :root { /* ── Brand ─────────────────────────────────────────────────────────── */ --pps-bg: #f4f6fa; --pps-paper: #ffffff; --pps-paper-2: #f8f9fb; --pps-ink: #14171c; --pps-primary: #0a2540; /* tightened ASI navy — chrome */ --pps-primary-fg: #ffffff; --pps-primary-hover: #163558; --pps-accent: #0055b3; /* royal — links + key actions */ --pps-accent-fg: #ffffff; --pps-accent-hover: #004591; /* ── Neutrals — single 9-step ramp ────────────────────────────────── */ --pps-n-50: #f8f9fb; --pps-n-100: #eef0f4; --pps-n-200: #e0e3ea; --pps-n-300: #c4c9d4; --pps-n-400: #94a3b8; /* finally tokenized */ --pps-n-500: #64748b; --pps-n-600: #475569; --pps-n-700: #334155; --pps-n-800: #1f2937; --pps-n-900: #0f172a; /* ── Semantic intents ─────────────────────────────────────────────── */ --pps-bad: #b42318; /* overdue, escalated, fail */ --pps-bad-bg: #fdecec; --pps-bad-fg: #ffffff; --pps-bad-border: #fbb4ae; --pps-bad-tint: #fff5f5; /* table row tint */ --pps-warn: #b54708; /* due-soon, needs-review */ --pps-warn-bg: #fef0d8; --pps-warn-fg: #ffffff; --pps-warn-border: #fcd9a4; --pps-warn-tint: #fffbf0; --pps-ok: #14693a; /* on-cadence, closed, pass */ --pps-ok-bg: #e1f4e8; --pps-ok-fg: #ffffff; --pps-ok-border: #b7e0c2; --pps-ok-tint: #f4faf6; --pps-info: #1e40af; /* in-review, intake, info */ --pps-info-bg: #ecf2ff; --pps-info-fg: #ffffff; --pps-info-border: #cbd9f5; --pps-info-tint: #f6f8ff; /* ── Workflow stage hues — for badges/legends, NOT chrome ─────────── */ --pps-stage-new: #1e40af; --pps-stage-new-bg: #ecf2ff; --pps-stage-assigned: #5b21b6; --pps-stage-assigned-bg: #f3efff; --pps-stage-progress: #92400e; --pps-stage-progress-bg: #fff7d6; --pps-stage-review: #9d174d; --pps-stage-review-bg: #fde6ef; --pps-stage-closed: #14693a; --pps-stage-closed-bg: #e1f4e8; /* ── Chart hues — distinct, color-blind safe-ish, sober ───────────── */ --pps-chart-1: #0055b3; /* accent */ --pps-chart-2: #5b21b6; /* purple */ --pps-chart-3: #0891b2; /* teal */ --pps-chart-4: #b54708; /* warn */ --pps-chart-5: #14693a; /* ok */ --pps-chart-6: #b42318; /* bad */ /* ── Surface tokens ───────────────────────────────────────────────── */ --pps-rule-color: var(--pps-n-200); --pps-rule: 1px solid var(--pps-rule-color); --pps-rule-soft: 1px solid var(--pps-n-100); --pps-divider: 1px solid var(--pps-n-300); /* ── Shadow ladder ────────────────────────────────────────────────── */ --pps-shadow-sm: 0 1px 2px rgba(20,23,28,.04); --pps-shadow: 0 1px 2px rgba(20,23,28,.06), 0 1px 3px rgba(20,23,28,.04); --pps-shadow-md: 0 2px 4px rgba(20,23,28,.06), 0 4px 12px rgba(20,23,28,.06); --pps-shadow-lg: 0 8px 24px rgba(20,23,28,.12); --pps-shadow-overlay: 0 20px 60px rgba(20,23,28,.18); /* ── Geometry ─────────────────────────────────────────────────────── */ --pps-radius-sm: 3px; --pps-radius: 6px; --pps-radius-lg: 10px; --pps-radius-pill: 999px; /* ── Type ─────────────────────────────────────────────────────────── */ --pps-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto, system-ui, sans-serif; --pps-font-serif: "Newsreader", "Iowan Old Style", "Charter", Georgia, serif; --pps-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Consolas, "Roboto Mono", monospace; /* 7-step ramp + 2 reserved for serif numerals on KPI/metric */ --pps-t-label: 11px; --pps-t-code: 12px; --pps-t-data: 13px; --pps-t-body: 14px; --pps-t-sub: 16px; --pps-t-panel: 20px; --pps-t-sect: 28px; --pps-t-hero: 40px; --pps-t-metric: 48px; /* serif, KPI numerals */ --pps-t-metric-xl: 64px; /* serif, featured tile */ --pps-lh-tight: 1.15; --pps-lh-snug: 1.35; --pps-lh-body: 1.55; /* ── Spacing — 4px base ───────────────────────────────────────────── */ --pps-sp-1: 4px; --pps-sp-2: 8px; --pps-sp-3: 12px; --pps-sp-4: 16px; --pps-sp-5: 20px; --pps-sp-6: 24px; --pps-sp-8: 32px; --pps-sp-10: 40px; --pps-sp-12: 48px; /* ── Motion ───────────────────────────────────────────────────────── */ --pps-ease: cubic-bezier(.2, .8, .2, 1); --pps-dur-fast: 120ms; --pps-dur: 200ms; --pps-dur-slow: 320ms; /* ── Sticky chrome heights — used by .hdr / .subnav top offsets ── The merged dark header holds the brand mark + tabs + right controls, so it's ~56px (up from the old 52px when tabs lived in their own row). The sub-nav (parent-tab-specific sub-tabs) is a light row underneath. */ --pps-hdr-h: 56px; --pps-subnav-h: 42px; /* legacy alias — kept for any rule still referencing --pps-nav-h */ --pps-nav-h: var(--pps-subnav-h); /* ── Z scale ──────────────────────────────────────────────────────── */ --pps-z-shell: 50; --pps-z-overlay: 200; --pps-z-slideout: 300; --pps-z-modal: 400; --pps-z-toast: 500; } @media (prefers-reduced-motion: reduce) { :root { --pps-dur-fast: 0ms; --pps-dur: 0ms; --pps-dur-slow: 0ms; } } /* Legacy alias block removed 2026-05-27 — every var(--blue|--g500|--primary|…) reference in both dashboards was rewritten to its --pps-* equivalent. If you re-introduce legacy names anywhere, fix the call-site instead of restoring this block. */