/*
* PRISM Design System — Token Contract
* The authoritative variable surface. Every PRISM component reads from here.
* Consumer apps:
* 1.
* 2. Set (or any other registered theme).
* 3. Optionally override --prism-font-ui / --prism-font-mono on :root.
*
* To register a new master-app theme, add a :root[data-theme=""] block
* at the bottom of this file. Brand color is locked per master app; accent
* may be theme-overridable within that brand later (v0.2).
*/
/* ═══════════════════════════════════════════════════════════════
1. CONSTANTS — never theme-dependent
═══════════════════════════════════════════════════════════════ */
:root {
--prism-font-ui: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--prism-font-mono: 'JetBrains Mono', Consolas, 'SF Mono', monospace;
/* Spacing scale */
--prism-space-xs: 4px;
--prism-space-sm: 8px;
--prism-space-md: 12px;
--prism-space-lg: 16px;
--prism-space-xl: 24px;
/* Radius scale */
--prism-radius-tight: 5px;
--prism-radius-md: 8px;
--prism-radius-lg: 12px;
--prism-radius-pill: 999px;
--prism-radius-circle: 50%;
/* Shadows */
--prism-shadow-sm: 0 2px 6px rgba(0,0,0,0.10);
--prism-shadow-md: 0 4px 24px rgba(0,0,0,0.10);
--prism-shadow-lg: 0 24px 80px rgba(0,0,0,0.22);
/* Glass card variant — opt-in via .
Theme packages override these to brand-flavor the glass aesthetic.
Default is leadership-safe (clear translucent over surface tint). */
--prism-glass-bg: color-mix(in srgb, var(--prism-surface) 65%, transparent);
--prism-glass-blur: 10px;
--prism-glass-border: 1px solid color-mix(in srgb, var(--prism-border-strong) 80%, transparent);
--prism-glass-shadow: 0 8px 40px rgba(0,0,0,0.18);
/* Transitions */
--prism-transition-fast: 150ms;
--prism-transition-normal: 200ms;
/* Type scale — additive surface for consumers authoring custom layouts.
Components currently hardcode equivalent literal values inside their
shadow CSS; migrate opportunistically when touched, no breaking sweep. */
--prism-text-xs: 10px; /* micro labels, uppercase captions, timestamps */
--prism-text-sm: 11px; /* table cells, form labels, secondary text */
--prism-text-md: 12px; /* input text, descriptions, body copy */
--prism-text-lg: 13px; /* buttons, nav items, card titles, body baseline */
--prism-text-xl: 14px; /* section headings, panel titles */
--prism-text-2xl: 18px; /* page titles, small KPI values */
--prism-text-3xl: 22px; /* KPI values, prominent headers */
/* Font-weight scale — Nunito Sans loadout */
--prism-fw-regular: 400;
--prism-fw-semibold: 600;
--prism-fw-bold: 700;
--prism-fw-heavy: 800;
--prism-fw-black: 900;
/* Label pattern (the PTS-guide-codified "all form labels look like this")
— derived; components own the canonical implementation. */
--prism-label-tracking: 0.06em;
/* Z-index ladder (locked v0.4 — public contract for host apps too)
Tooltip sits above popover so it isn't covered by its own trigger.
Toast sits highest so it shows over a modal that just failed. */
--prism-z-dropdown: 100;
--prism-z-sticky: 200;
--prism-z-popover: 500;
--prism-z-window: 600;
--prism-z-drawer-persistent: 700;
--prism-z-tooltip: 800;
--prism-z-modal: 1000;
--prism-z-modal-stacked: 1500;
--prism-z-drag: 1900;
--prism-z-toast: 2000;
/* App-shell sizing — retunable per-theme. */
--prism-app-bar-height: 56px;
--prism-drawer-width: 280px;
--prism-drawer-height: 280px;
--prism-sidebar-width: 240px;
--prism-sidebar-width-collapsed: 56px;
/* Window primitive sizing — retunable per-theme. */
--prism-window-titlebar-height: 36px;
--prism-window-min-width: 280px;
--prism-window-min-height: 200px;
--prism-window-mobile-breakpoint: 768px;
--prism-window-edge-keep: 80px; /* min header px kept on-screen during drag */
--prism-window-chip-width: 18rem; /* minimized-chip width (lifted from OMS) */
--prism-window-chip-gap: 8px; /* horizontal gap between docked chips */
/* ── prism-person-card (v0.10) ─────────────────────────────────── */
--prism-person-node-size: 64px;
--prism-person-chip-height: 28px;
--prism-person-row-height: 56px;
--prism-person-profile-width: 288px;
/* Role-tint border colors. Only these four roles drive visible color;
any other `role` value renders with --prism-person-role-neutral. */
--prism-person-role-subject: #6366f1; /* indigo — inmate/arrestee */
--prism-person-role-victim: #ef4444; /* red — victim */
--prism-person-role-witness: #14b8a6; /* teal — witness */
--prism-person-role-officer: #2563eb; /* blue — sworn officer */
--prism-person-role-neutral: var(--prism-border);
/* ── v0.11 other-card family ───────────────────────────────────── */
/* Sizes mirror v0.10 person-card for visual consistency. */
--prism-card-node-size: 64px;
--prism-card-chip-height: 28px;
--prism-card-row-height: 56px;
--prism-card-profile-width: 320px;
/* Subject-card profile is wider for booking history. */
--prism-subject-profile-width: 360px;
/* Mini-card height (sub-component rows inside parent cards). */
--prism-card-mini-height: 32px;
/* Semantic-flag visual hooks — consumer-themable; transparent default
so PRISM ships zero opinionated paint job. Consumers override per app. */
--prism-flag-officer-safety-bg: transparent;
--prism-flag-officer-safety-fg: inherit;
--prism-flag-warning-bg: transparent;
--prism-flag-warning-fg: inherit;
--prism-flag-info-bg: transparent;
--prism-flag-info-fg: inherit;
--prism-flag-status-bg: transparent;
--prism-flag-status-fg: inherit;
/* ── v0.12 landing-page primitives ───────────────────────────── */
--prism-landing-section-pad-y: 80px;
--prism-landing-section-pad-x: 32px;
--prism-landing-max-width: 1100px;
--prism-landing-hero-headline-size: 48px;
--prism-landing-hero-subhead-size: 18px;
--prism-landing-eyebrow-size: 12px;
--prism-feature-grid-gap: 32px;
--prism-feature-icon-size: 40px;
--prism-pricing-tier-width: 260px;
--prism-pricing-tier-gap: 16px;
--prism-pricing-recommended-scale: 1.05;
--prism-testimonial-quote-size: 22px;
--prism-testimonial-quote-emphasis-size: 36px;
--prism-logo-strip-height: 40px;
--prism-footer-pad-y: 48px;
/* ── v0.13 chart family ───────────────────────────────────────── */
/* Series colors — six-step palette. Multi-series charts cycle through
these in order. Consumers can override individually for brand palettes
or pass color-strategy="explicit" to set per-series colors at data level. */
--prism-chart-series-1: var(--prism-accent);
--prism-chart-series-2: var(--prism-info);
--prism-chart-series-3: var(--prism-success);
--prism-chart-series-4: var(--prism-warning);
--prism-chart-series-5: var(--prism-danger);
--prism-chart-series-6: var(--prism-special, #8b5cf6);
/* Chart chrome — axis labels, gridlines, tooltips, empty-state text */
--prism-chart-axis-color: var(--prism-text-muted);
--prism-chart-axis-font-size: 11px;
--prism-chart-axis-font-weight: 500;
--prism-chart-gridline-color: color-mix(in srgb, var(--prism-border) 60%, transparent);
--prism-chart-gridline-dash: 2 4;
--prism-chart-tooltip-bg: var(--prism-surface);
--prism-chart-tooltip-border: var(--prism-border);
--prism-chart-tooltip-text: var(--prism-text);
--prism-chart-empty-text-color: var(--prism-text-muted);
/* Default sizes — used when `width` / `height` attrs omitted */
--prism-chart-default-width: 480px;
--prism-chart-default-height: 240px;
--prism-chart-sparkline-width: 120px;
--prism-chart-sparkline-height: 24px;
--prism-chart-stat-value-size: 28px;
--prism-chart-stat-label-size: 11px;
--prism-chart-stat-delta-size: 12px;
/* Bar chart spacing */
--prism-chart-bar-gap: 4px;
--prism-chart-bar-group-gap: 12px;
/* Pie chart */
--prism-chart-pie-donut-inner: 60%;
--prism-chart-pie-label-color: var(--prism-text);
--prism-chart-pie-min-slice-pct: 5;
/* Hover state */
--prism-chart-hover-opacity: 0.85;
--prism-chart-dim-opacity: 0.4;
/* Animation — initial mount only; respects prefers-reduced-motion */
--prism-chart-anim-duration: 320ms;
--prism-chart-anim-easing: cubic-bezier(0.22, 1, 0.36, 1);
/* ── v0.15 primitive promotions ───────────────────────────────── */
/* Filter chip family */
--prism-filter-chip-padding: 4px 10px;
--prism-filter-chip-padding-compact: 2px 8px;
--prism-filter-chip-bg-default: var(--prism-surface-2);
--prism-filter-chip-bg-active: var(--prism-tint);
--prism-filter-chip-bg-hover: color-mix(in srgb, var(--prism-surface-2) 70%, var(--prism-text) 5%);
--prism-filter-chip-fg-default: var(--prism-text-2);
--prism-filter-chip-fg-active: var(--prism-accent);
--prism-filter-chip-border: 1px solid var(--prism-border);
--prism-filter-chip-border-active: 1px solid color-mix(in srgb, var(--prism-accent) 40%, transparent);
--prism-filter-chip-radius: var(--prism-radius-pill);
--prism-filter-chip-font-size: 12px;
--prism-filter-chip-count-bg: color-mix(in srgb, var(--prism-accent) 18%, transparent);
--prism-filter-chip-count-fg: var(--prism-text);
--prism-filter-chip-dot-size: 6px;
--prism-filter-chip-disabled-opacity: 0.45;
/* Filter bar layout */
--prism-filter-bar-gap: 6px;
--prism-filter-bar-padding: 8px 16px;
--prism-filter-bar-min-height: 40px;
--prism-filter-bar-scrollbar-height: 6px;
/* Peer-pill sizing */
--prism-peer-pill-padding-sm: 2px 8px 2px 4px;
--prism-peer-pill-padding-md: 4px 12px 4px 6px;
--prism-peer-pill-padding-lg: 6px 16px 6px 8px;
--prism-peer-pill-avatar-size-sm: 18px;
--prism-peer-pill-avatar-size-md: 22px;
--prism-peer-pill-avatar-size-lg: 28px;
--prism-peer-pill-font-size-sm: 11px;
--prism-peer-pill-font-size-md: 12px;
--prism-peer-pill-font-size-lg: 14px;
--prism-peer-pill-status-size-sm: 9px;
--prism-peer-pill-status-size-md: 10px;
--prism-peer-pill-status-size-lg: 12px;
--prism-peer-pill-radius: var(--prism-radius-pill);
--prism-peer-pill-min-width: 120px;
--prism-peer-pill-max-width: 240px;
--prism-peer-pill-stale-opacity: 0.6;
/* Live dot + work bar (decoration) */
--prism-peer-pill-livedot-color: var(--prism-success);
--prism-peer-pill-livedot-size: 6px;
--prism-peer-pill-workbar-height: 2px;
/* Semantic peer-state colors — themable per-theme overrides */
--prism-status-working: var(--prism-warning);
--prism-status-live: var(--prism-success);
--prism-status-idle: var(--prism-text-muted);
--prism-status-stub: var(--prism-text-3);
--prism-status-offline: color-mix(in srgb, var(--prism-text-muted) 60%, transparent);
--prism-status-danger: var(--prism-danger);
--prism-status-success: var(--prism-success);
}
/* ═══════════════════════════════════════════════════════════════
2. LIGHT MODE BASELINE — applies to themes ending in -light or -day
(Carolina-based legacy hosts use day/night vocabulary; standalone
Claude-built apps use light/dark. PRISM matches both.)
═══════════════════════════════════════════════════════════════ */
:root,
:root[data-theme$="-light"],
:root[data-theme$="-day"] {
--prism-bg: #f0f4f8;
--prism-surface: #ffffff;
--prism-surface-2: #f8fafc;
--prism-surface-3: #e2e8f0;
/* Aliases for two-color shimmer (skeleton, etc.) — dark-mode safe. */
--prism-surface-base: var(--prism-surface-2);
--prism-surface-elevated: var(--prism-surface-3);
--prism-border: #dde3ed;
--prism-border-strong: #c8d1de;
--prism-text: #0f172a;
/* Secondary-text floors land WCAG-AA against --prism-surface across every
shipped theme. Values empirically validated by dylan via a 33-theme
contrast audit on the PTS Support Console (claude-bus 2026-05-16).
Hierarchy: text > text-2 > text-3 > text-muted. */
--prism-text-2: #2d3340;
--prism-text-3: #444c56;
--prism-text-muted: #525866;
--prism-text-on-brand: #ffffff;
--prism-row-hover: #f0f7ff;
--prism-th-bg: #f1f5f9;
--prism-success: #16a34a;
--prism-warning: #d97706;
--prism-danger: #dc2626;
--prism-info: #1565c0;
--prism-special: #7c3aed;
--prism-neutral: #6b7280;
}
/* ═══════════════════════════════════════════════════════════════
3. DARK MODE BASELINE — applies to themes ending in -dark or -night
═══════════════════════════════════════════════════════════════ */
:root[data-theme$="-dark"],
:root[data-theme$="-night"] {
--prism-bg: #111111;
--prism-surface: #1a1a1a;
--prism-surface-2: #222222;
--prism-surface-3: #2a2a2a;
--prism-border: #2e2e2e;
--prism-border-strong: #3a3a3a;
--prism-text: #e2e8f0;
/* See light-mode block for floor rationale (dylan's 33-theme audit). */
--prism-text-2: #cdd2da;
--prism-text-3: #c2c8d0;
--prism-text-muted: #a8aeb8;
--prism-text-on-brand: #ffffff;
--prism-row-hover: #1e2535;
--prism-th-bg: rgba(0,0,0,0.25);
/* Glass variant — deeper translucent + softer shadow on dark surfaces. */
--prism-glass-bg: color-mix(in srgb, var(--prism-surface) 60%, transparent);
--prism-glass-shadow: 0 8px 40px rgba(0,0,0,0.42);
--prism-success: #22c55e;
--prism-warning: #f59e0b;
--prism-danger: #ef4444;
--prism-info: #60a5fa;
--prism-special: #a855f7;
--prism-neutral: #9ca3af;
}
/* ═══════════════════════════════════════════════════════════════
4. MASTER-APP THEME PRESETS
Each master app locks --prism-brand and supplies an --prism-accent
family appropriate to its mode. Add new master apps below.
═══════════════════════════════════════════════════════════════ */
/* — RMS (blue) — Carolina-based host; uses day/night vocabulary.
Default theme when no data-theme attribute is set. */
:root,
:root[data-theme="rms-day"] {
--prism-brand: #1976d2;
--prism-accent: #1976d2;
--prism-accent-hover: #1565c0;
--prism-tint: #eff6ff;
--prism-tint-strong: #dbeafe;
--prism-focus-ring: rgba(25, 118, 210, 0.18);
}
:root[data-theme="rms-night"] {
--prism-brand: #1976d2;
--prism-accent: #60a5fa;
--prism-accent-hover: #93c5fd;
--prism-tint: rgba(96, 165, 250, 0.10);
--prism-tint-strong: rgba(96, 165, 250, 0.20);
--prism-focus-ring: rgba(96, 165, 250, 0.35);
}
/* — OMS (orange) — standalone Claude-built app, vanilla JS + Express.
Uses light/dark vocabulary. OMS stamps --prism-* aliases dynamically
from its own --primary (one of 33 user-pickable themes) inside
applyUserTheme(); these blocks are defensive fallbacks for the
moment before that runs and for the gallery preview. */
:root[data-theme="oms-light"] {
--prism-brand: #E0703A;
--prism-accent: #E0703A;
--prism-accent-hover: #C25A28;
--prism-tint: #fff3ec;
--prism-tint-strong: #ffd9c6;
--prism-focus-ring: rgba(224, 112, 58, 0.25);
}
:root[data-theme="oms-dark"] {
--prism-brand: #E0703A;
--prism-accent: #FF7043;
--prism-accent-hover: #FF8A65;
--prism-tint: rgba(255, 112, 67, 0.10);
--prism-tint-strong: rgba(255, 112, 67, 0.20);
--prism-focus-ring: rgba(255, 112, 67, 0.35);
}
/* — CAD (yellow) — Carolina-based host; day/night vocabulary. */
:root[data-theme="cad-day"] {
--prism-brand: #F9A825;
--prism-accent: #F57F17;
--prism-accent-hover: #E65100;
--prism-tint: #fff8e1;
--prism-tint-strong: #ffecb3;
--prism-focus-ring: rgba(245, 127, 23, 0.25);
}
:root[data-theme="cad-night"] {
--prism-brand: #F9A825;
--prism-accent: #FFB300;
--prism-accent-hover: #FFCA28;
--prism-tint: rgba(255, 179, 0, 0.10);
--prism-tint-strong: rgba(255, 179, 0, 0.22);
--prism-focus-ring: rgba(255, 179, 0, 0.35);
}
/* — VOCAL (emerald) — standalone Claude-built app; light/dark vocabulary.
Matches the Radio brand established 2026-04-15. */
:root[data-theme="vocal-light"] {
--prism-brand: #10b981;
--prism-accent: #10b981;
--prism-accent-hover: #059669;
--prism-tint: #ecfdf5;
--prism-tint-strong: #a7f3d0;
--prism-focus-ring: rgba(16, 185, 129, 0.22);
}
:root[data-theme="vocal-dark"] {
--prism-brand: #10b981;
--prism-accent: #34d399;
--prism-accent-hover: #6ee7b7;
--prism-tint: rgba(52, 211, 153, 0.10);
--prism-tint-strong: rgba(52, 211, 153, 0.22);
--prism-focus-ring: rgba(52, 211, 153, 0.35);
}
/* ═══════════════════════════════════════════════════════════════
5. PAGE BASELINE
Apps that link tokens.css get sensible defaults on body.
Components define their own typography inside shadow DOM.
═══════════════════════════════════════════════════════════════ */
body {
font-family: var(--prism-font-ui);
font-size: 13px;
line-height: 1.5;
color: var(--prism-text);
background: var(--prism-bg);
margin: 0;
-webkit-font-smoothing: antialiased;
}
/* ═══════════════════════════════════════════════════════════════
* v0.14 print mode — Layer 1 (color tokens)
* Force black-on-white across all themes when printing.
* Every shadow-DOM component inherits these via CSS cascade.
* ═══════════════════════════════════════════════════════════════ */
@media print {
:root,
[data-theme] {
--prism-bg: #ffffff;
--prism-surface: #ffffff;
--prism-surface-2: #ffffff;
--prism-surface-elevated: #ffffff;
--prism-surface-base: #ffffff;
--prism-surface-raised: #ffffff;
--prism-text: #000000;
--prism-text-2: #1a1a1a;
--prism-text-3: #333333;
--prism-text-muted: #4a4a4a;
--prism-border: #888888;
--prism-divider: #bbbbbb;
--prism-accent: #222222;
--prism-accent-2: #444444;
--prism-tint: transparent;
--prism-success: #1f5f3f;
--prism-warning: #5f4a1f;
--prism-danger: #5f1f1f;
--prism-info: #1f3f5f;
--prism-chart-series-1: #000000;
--prism-chart-series-2: #333333;
--prism-chart-series-3: #666666;
--prism-chart-series-4: #999999;
--prism-chart-series-5: #bbbbbb;
--prism-chart-series-6: #dddddd;
--prism-chart-axis-color: #000000;
--prism-chart-gridline-color: #cccccc;
--prism-chart-tooltip-bg: #ffffff;
--prism-chart-tooltip-border: #888888;
--prism-chart-tooltip-text: #000000;
/* Disable shadows in print — they print as gray smudges */
--prism-shadow-sm: none;
--prism-shadow-md: none;
--prism-shadow-lg: none;
}
}
/* ═══════════════════════════════════════════════════════════════
* v0.14 print mode — Layer 2 (operational chrome hide)
* Components that should never print.
* ═══════════════════════════════════════════════════════════════ */
@media print {
prism-toast,
prism-toast-host,
prism-tooltip,
prism-popover,
prism-dropdown-menu,
prism-menu-item,
prism-modal,
prism-drawer,
prism-window-switcher,
prism-pagination {
display: none !important;
}
prism-app-bar,
prism-toolbar {
display: none !important;
}
/* Escape hatch: opt-in to keep nav chrome in print */
prism-app-bar.print-keep,
prism-toolbar.print-keep {
display: revert !important;
}
}
/* ═══════════════════════════════════════════════════════════════
* v0.14 print mode — Layer 5 (page-break hints)
* Cards and section containers should not split across pages.
* ═══════════════════════════════════════════════════════════════ */
@media print {
prism-card,
prism-person-card,
prism-subject-card,
prism-warrant-card,
prism-incident-card,
prism-vehicle-card,
prism-address-card,
prism-hero,
prism-feature-grid,
prism-pricing-table,
prism-testimonial,
prism-cta-block,
prism-faq,
prism-faq-item,
prism-list-item,
prism-accordion-item,
prism-data-table,
prism-chart-line,
prism-chart-area,
prism-chart-bar,
prism-chart-pie,
prism-chart-stat {
page-break-inside: avoid;
break-inside: avoid;
}
/* Don't split headings from their content */
h1, h2, h3, h4 {
page-break-after: avoid;
break-after: avoid;
}
}
/* ═══════════════════════════════════════════════════════════════
* v0.14 print PREVIEW mode — for screen testing
* Applied to by PRISM.print.setPreviewMode(true).
* Mirrors @media print rules so consumers can iterate without re-printing.
* ═══════════════════════════════════════════════════════════════ */
body.prism-print-preview {
background: #ffffff !important;
}
body.prism-print-preview prism-toast,
body.prism-print-preview prism-toast-host,
body.prism-print-preview prism-tooltip,
body.prism-print-preview prism-popover,
body.prism-print-preview prism-dropdown-menu,
body.prism-print-preview prism-modal,
body.prism-print-preview prism-drawer,
body.prism-print-preview prism-window-switcher,
body.prism-print-preview prism-pagination,
body.prism-print-preview prism-app-bar:not(.print-keep),
body.prism-print-preview prism-toolbar:not(.print-keep) {
display: none !important;
}
body.prism-print-preview :is(
prism-card, prism-person-card, prism-subject-card, prism-warrant-card,
prism-incident-card, prism-vehicle-card, prism-address-card,
prism-data-table, prism-chart-line, prism-chart-area, prism-chart-bar, prism-chart-pie
) {
break-inside: avoid;
}