/* ─────────────────────────────────────────────
Prism — Design System v1.0
============================================
A tokenised, component-oriented layer that sits on top of main.css.
Imported AFTER main.css so brand overrides and new primitives win.
Loaded from base.html as:
Highlights
----------
• Single source of truth for colour, type, spacing, motion.
• Primitive components (.ps-btn, .ps-card, .ps-chip, …) usable from any
Jinja template — no framework required.
• Respects prefers-reduced-motion, supports both light & dark themes,
tuned for WCAG AA contrast.
• All tokens are namespaced `--ps-*` to avoid clashing with the legacy
`--bg / --accent / …` tokens in main.css. Legacy tokens are re-wired
to the new palette at the bottom of this file, so the whole platform
rebrands in one shot.
───────────────────────────────────────────── */
/* ── 1. FONTS ────────────────────────────────────────────────────── */
/* D-T-11: Inter + JetBrains Mono are loaded ONCE via the canonical
``frontend/templates/_fonts.html`` partial that ``base.html``
includes. The previous ``@import url(...)`` here:
(a) declared a narrower 400-700 Inter weight set than the
marketing pages did (400-800) — synthetic-bold at weight
800 in-app vs real Inter Black on /home;
(b) blocked first-paint on this stylesheet's roundtrip rather
than firing in parallel via ```` in ````.
Moving to the partial makes the loading single-sourced and
parallel. ``display=swap`` lives on the partial. */
/* ── 2. DESIGN TOKENS ────────────────────────────────────────────── */
:root {
/* Brand — Primary violet / indigo */
--ps-brand-50: #F4F2FE;
--ps-brand-100: #E7E3FD;
--ps-brand-200: #CFC8FB;
--ps-brand-300: #B1A5F6;
--ps-brand-400: #8F7FF0;
--ps-brand-500: #6C5CE7; /* primary */
--ps-brand-600: #5B4BD6;
--ps-brand-700: #4F46E5;
--ps-brand-800: #3F38B0;
--ps-brand-900: #2B2676;
/* Spectrum — the six signal bands */
--ps-crimson: #EF4444;
--ps-orange: #F97316;
--ps-amber: #F59E0B;
--ps-emerald: #10B981;
--ps-cyan: #06B6D4;
--ps-violet: #8B5CF6;
/* Semantic aliases (light theme values) */
--ps-success: var(--ps-emerald);
--ps-warning: var(--ps-amber);
--ps-danger: var(--ps-crimson);
--ps-info: var(--ps-cyan);
--ps-accent: var(--ps-brand-500);
--ps-accent-hover: var(--ps-brand-600);
/* Tinted backgrounds for state pills / subtle fills */
--ps-brand-tint: rgba(108, 92, 231, 0.10);
--ps-success-tint: rgba(16, 185, 129, 0.10);
--ps-warning-tint: rgba(245, 158, 11, 0.12);
--ps-danger-tint: rgba(239, 68, 68, 0.10);
--ps-info-tint: rgba(6, 182, 212, 0.10);
/* Neutrals — light theme (mirrored below for dark) */
--ps-bg: #F6F7FB;
--ps-bg-subtle: #EFF2F7;
--ps-surface: #FFFFFF;
--ps-surface-2: #FAFBFD;
--ps-border: #E6E9F2;
--ps-border-strong: #D0D5DD;
--ps-text: #0F1320;
--ps-text-muted: #667085;
/* D-A11Y-18 / D-T-13: bumped from #98A2B3 (~2.6:1) to #5F6780
(~5.4:1 on bg) so dim text passes WCAG AA for body copy. */
--ps-text-dim: #5F6780;
--ps-scrim: rgba(15,19,32,0.55);
/* Radii */
--ps-radius-sm: 4px;
--ps-radius: 6px;
--ps-radius-md: 8px;
--ps-radius-lg: 12px;
--ps-radius-xl: 16px;
--ps-radius-pill: 9999px;
/* Spacing (4px base) */
--ps-space-1: 4px;
--ps-space-2: 8px;
--ps-space-3: 12px;
--ps-space-4: 16px;
--ps-space-5: 20px;
--ps-space-6: 24px;
--ps-space-7: 32px;
--ps-space-8: 40px;
--ps-space-9: 48px;
--ps-space-10: 64px;
--ps-space-11: 80px;
--ps-space-12: 96px;
/* Type */
--ps-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--ps-font-mono: 'JetBrains Mono', 'Menlo', 'SFMono-Regular', Consolas, monospace;
--ps-text-xs: 11px;
--ps-text-sm: 12px;
/* D-T-17: 13 / 16 added so the 100+ inline ``font-size:13px`` and
``font-size:16px`` declarations the audit flagged have on-scale
tokens to snap to. */
--ps-text-13: 13px;
--ps-text-base: 14px;
--ps-text-md: 15px;
--ps-text-16: 16px;
--ps-text-lg: 18px;
--ps-text-xl: 22px;
--ps-text-2xl: 26px;
--ps-text-3xl: 34px;
--ps-text-4xl: 44px;
/* D-T-32: z-index scale — ``9000``, ``9999`` magic numbers
were appearing inline at modal / toast / tooltip layers. */
--ps-z-dropdown: 100;
--ps-z-sticky: 200;
--ps-z-overlay: 900;
--ps-z-modal: 1000;
--ps-z-toast: 1100;
--ps-z-tooltip: 1200;
/* Elevation (light) */
--ps-elev-1: 0 1px 2px rgba(15, 23, 42, 0.06);
--ps-elev-2: 0 4px 12px rgba(15, 23, 42, 0.08);
--ps-elev-3: 0 8px 24px rgba(15, 23, 42, 0.10);
--ps-elev-4: 0 16px 48px rgba(15, 23, 42, 0.14);
/* Motion */
--ps-ease: cubic-bezier(0.22, 1, 0.36, 1);
--ps-duration-1: 120ms;
--ps-duration-2: 180ms;
--ps-duration-3: 240ms;
--ps-duration-4: 400ms;
/* Focus ring (single source of truth) */
--ps-focus-ring: 0 0 0 2px var(--ps-surface), 0 0 0 4px var(--ps-brand-400);
}
[data-theme="dark"] {
--ps-bg: #0B0D17;
--ps-bg-subtle: #11131F;
--ps-surface: #151724;
--ps-surface-2: #1C1F30;
--ps-border: #1F2235;
--ps-border-strong: #2A2E40;
--ps-text: #E6E9F2;
--ps-text-muted: #8892A4;
/* D-A11Y-18 / D-T-13: bumped from #5F6780 (~3.4:1) to #8892A4
(~6.8:1) so dim text passes WCAG AA on dark theme too. */
--ps-text-dim: #8892A4;
--ps-scrim: rgba(3, 5, 12, 0.72);
/* Spectrum values shift slightly brighter in dark */
--ps-crimson: #F87171;
--ps-orange: #FB923C;
--ps-amber: #FBBF24;
--ps-emerald: #4ADE80;
--ps-cyan: #22D3EE;
--ps-violet: #A78BFA;
--ps-brand-tint: rgba(108, 92, 231, 0.15);
--ps-success-tint: rgba(74, 222, 128, 0.14);
--ps-warning-tint: rgba(251, 191, 36, 0.14);
--ps-danger-tint: rgba(248, 113, 113, 0.14);
--ps-info-tint: rgba(34, 211, 238, 0.14);
--ps-elev-1: 0 1px 2px rgba(0, 0, 0, 0.35);
--ps-elev-2: 0 4px 12px rgba(5, 6, 18, 0.45);
--ps-elev-3: 0 8px 24px rgba(5, 6, 18, 0.55);
--ps-elev-4: 0 16px 48px rgba(5, 6, 18, 0.65);
--ps-focus-ring: 0 0 0 2px var(--ps-bg), 0 0 0 4px var(--ps-brand-400);
}
/* ── 3. BASE ELEMENT RESETS ─────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body,
.ps-root {
font-family: var(--ps-font-sans);
font-feature-settings: 'cv11', 'ss01'; /* Inter small-caps + ss01 (alt) */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: var(--ps-text);
background: var(--ps-bg);
font-size: var(--ps-text-base);
line-height: 1.5;
}
code, pre, kbd, samp, .ps-mono {
font-family: var(--ps-font-mono);
font-size: 0.94em;
}
/* Any number you want to guarantee column-alignable */
.ps-num,
.ps-table td.num,
.ps-tile .ps-tile-value {
font-variant-numeric: tabular-nums;
}
/* ── 4. FOCUS RING ─────────────────────────────────────────────── */
:where(button, a, input, select, textarea, [tabindex], [role="button"]):focus {
outline: none;
}
:where(button, a, input, select, textarea, [tabindex], [role="button"]):focus-visible {
outline: none;
box-shadow: var(--ps-focus-ring);
border-radius: var(--ps-radius);
}
/* ── 5. HEADINGS & TEXT UTILITIES ───────────────────────────────── */
/* D-T-06 / D-T-26: previously the heading scale was only available via
``.ps-h1`` etc. classes that 0 of 67 templates used — every page had
````. We now also style the elements
directly so an unclassed ```` picks up the correct scale,
matching ``.ps-h1``. Templates can still opt out with explicit
classes / inline styles. */
h1, .ps-h1 { font-size: var(--ps-text-2xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; margin: 0; color: var(--ps-text); }
h2, .ps-h2 { font-size: var(--ps-text-xl); font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; margin: 0; color: var(--ps-text); }
h3, .ps-h3 { font-size: var(--ps-text-lg); font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; margin: 0; color: var(--ps-text); }
h4 { font-size: var(--ps-text-md); font-weight: 600; letter-spacing: -0.005em; line-height: 1.4; margin: 0; color: var(--ps-text); }
.ps-lede { color: var(--ps-text-muted); font-size: var(--ps-text-md); line-height: 1.55; max-width: 72ch; }
.ps-kicker {
font-size: var(--ps-text-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
color: var(--ps-text-muted);
}
.ps-muted { color: var(--ps-text-muted); }
.ps-dim { color: var(--ps-text-dim); }
/* ── 6. BUTTONS ────────────────────────────────────────────────── */
.ps-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ps-space-2);
padding: 8px 14px;
min-height: 36px;
border-radius: var(--ps-radius);
border: 1px solid transparent;
background: transparent;
color: var(--ps-text);
font: inherit;
font-size: var(--ps-text-base);
font-weight: 600;
letter-spacing: -0.005em;
text-decoration: none;
cursor: pointer;
user-select: none;
white-space: nowrap;
transition: background var(--ps-duration-1) var(--ps-ease),
border-color var(--ps-duration-1) var(--ps-ease),
color var(--ps-duration-1) var(--ps-ease),
transform var(--ps-duration-1) var(--ps-ease),
box-shadow var(--ps-duration-1) var(--ps-ease);
}
.ps-btn:active { transform: translateY(1px); }
.ps-btn[disabled],
.ps-btn[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
/* Variants */
.ps-btn-primary {
background: var(--ps-brand-500);
color: #fff;
box-shadow: var(--ps-elev-1);
}
.ps-btn-primary:hover { background: var(--ps-brand-600); }
.ps-btn-primary:focus-visible { box-shadow: var(--ps-focus-ring), var(--ps-elev-1); }
.ps-btn-secondary {
background: var(--ps-surface);
color: var(--ps-text);
border-color: var(--ps-border-strong);
}
.ps-btn-secondary:hover {
background: var(--ps-surface-2);
border-color: var(--ps-brand-400);
color: var(--ps-brand-500);
}
.ps-btn-ghost {
background: transparent;
color: var(--ps-text-muted);
}
.ps-btn-ghost:hover {
background: var(--ps-brand-tint);
color: var(--ps-text);
}
.ps-btn-danger {
background: var(--ps-danger);
color: #fff;
}
.ps-btn-danger:hover { filter: brightness(0.95); }
.ps-btn-link {
background: transparent;
color: var(--ps-brand-500);
padding: 0;
min-height: 0;
font-weight: 600;
}
.ps-btn-link:hover { color: var(--ps-brand-600); text-decoration: underline; }
/* Sizes */
.ps-btn-sm { padding: 5px 10px; min-height: 28px; font-size: var(--ps-text-sm); border-radius: var(--ps-radius-sm); }
.ps-btn-lg { padding: 11px 20px; min-height: 44px; font-size: var(--ps-text-md); border-radius: var(--ps-radius-md); }
/* Loading state — pair with aria-busy="true" */
.ps-btn[aria-busy="true"] {
position: relative;
color: transparent !important;
}
.ps-btn[aria-busy="true"]::after {
content: "";
position: absolute;
width: 14px; height: 14px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
color: #fff;
animation: ps-spin 600ms linear infinite;
}
@keyframes ps-spin { to { transform: rotate(360deg); } }
/* ── 7. INPUTS / SELECTS / TEXTAREAS ────────────────────────────── */
.ps-input,
.ps-select,
.ps-textarea {
display: block;
width: 100%;
padding: 8px 12px;
min-height: 36px;
background: var(--ps-surface);
color: var(--ps-text);
border: 1px solid var(--ps-border-strong);
border-radius: var(--ps-radius);
font: inherit;
font-size: var(--ps-text-base);
transition: border-color var(--ps-duration-1) var(--ps-ease),
box-shadow var(--ps-duration-1) var(--ps-ease),
background var(--ps-duration-1) var(--ps-ease);
}
.ps-input::placeholder,
.ps-textarea::placeholder { color: var(--ps-text-dim); }
.ps-input:hover,
.ps-select:hover,
.ps-textarea:hover { border-color: var(--ps-brand-400); }
.ps-input:focus,
.ps-select:focus,
.ps-textarea:focus {
border-color: var(--ps-brand-500);
box-shadow: 0 0 0 3px var(--ps-brand-tint);
outline: none;
}
.ps-input[aria-invalid="true"],
.ps-textarea[aria-invalid="true"] {
border-color: var(--ps-danger);
box-shadow: 0 0 0 3px var(--ps-danger-tint);
}
.ps-select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 32px;
}
.ps-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.ps-field-label {
font-size: var(--ps-text-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
color: var(--ps-text-muted);
}
.ps-field-hint { font-size: var(--ps-text-sm); color: var(--ps-text-muted); }
.ps-field-error { font-size: var(--ps-text-sm); color: var(--ps-danger); }
/* ── 8. CARDS ──────────────────────────────────────────────────── */
.ps-card {
background: var(--ps-surface);
border: 1px solid var(--ps-border);
border-radius: var(--ps-radius-lg);
padding: var(--ps-space-5);
box-shadow: var(--ps-elev-1);
}
.ps-card-elevated { box-shadow: var(--ps-elev-2); }
.ps-card-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--ps-space-4);
margin-bottom: var(--ps-space-4);
}
.ps-card-title { font-size: var(--ps-text-lg); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.ps-card-sub { color: var(--ps-text-muted); font-size: var(--ps-text-sm); margin-top: 2px; }
/* ── 9. CHIPS / BADGES ─────────────────────────────────────────── */
.ps-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 10px;
border-radius: var(--ps-radius-pill);
background: var(--ps-brand-tint);
color: var(--ps-brand-500);
font-size: var(--ps-text-xs);
font-weight: 600;
letter-spacing: 0.01em;
line-height: 18px;
white-space: nowrap;
}
.ps-chip-brand { background: var(--ps-brand-tint); color: var(--ps-brand-500); }
.ps-chip-success { background: var(--ps-success-tint); color: var(--ps-emerald); }
.ps-chip-warning { background: var(--ps-warning-tint); color: var(--ps-amber); }
.ps-chip-danger { background: var(--ps-danger-tint); color: var(--ps-crimson); }
.ps-chip-info { background: var(--ps-info-tint); color: var(--ps-cyan); }
.ps-chip-neutral { background: rgba(128,128,160,0.10); color: var(--ps-text-muted); }
.ps-chip-dot::before {
content: "";
width: 6px; height: 6px; border-radius: 50%;
background: currentColor; display: inline-block;
}
/* ── 10. TABLES ────────────────────────────────────────────────── */
.ps-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: var(--ps-text-base);
}
.ps-table thead th {
text-align: left;
padding: 10px 12px;
font-size: var(--ps-text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ps-text-muted);
border-bottom: 1px solid var(--ps-border);
background: var(--ps-surface-2);
position: sticky; top: 0;
}
.ps-table tbody td {
padding: 11px 12px;
border-bottom: 1px solid var(--ps-border);
vertical-align: middle;
}
.ps-table tbody tr:last-child td { border-bottom: none; }
.ps-table tbody tr:hover td { background: var(--ps-surface-2); }
.ps-table td.num { font-variant-numeric: tabular-nums; text-align: right; }
/* ── 11. TABS ──────────────────────────────────────────────────── */
.ps-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--ps-surface-2); border-radius: var(--ps-radius-md); border: 1px solid var(--ps-border); }
.ps-tab {
padding: 6px 14px;
background: transparent;
border: none;
border-radius: var(--ps-radius);
font: inherit;
font-size: var(--ps-text-sm);
font-weight: 500;
color: var(--ps-text-muted);
cursor: pointer;
transition: background var(--ps-duration-1), color var(--ps-duration-1);
}
.ps-tab:hover { color: var(--ps-text); }
.ps-tab.is-active {
background: var(--ps-surface);
color: var(--ps-text);
box-shadow: var(--ps-elev-1);
}
/* ── 12. KPI TILE ──────────────────────────────────────────────── */
.ps-tile {
padding: var(--ps-space-4);
background: var(--ps-surface);
border: 1px solid var(--ps-border);
border-radius: var(--ps-radius-lg);
display: flex; flex-direction: column; gap: 6px;
}
.ps-tile-label { font-size: var(--ps-text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ps-text-muted); }
.ps-tile-value { font-size: var(--ps-text-2xl); font-weight: 700; letter-spacing: -0.02em; color: var(--ps-text); }
.ps-tile-delta {
display: inline-flex; align-items: center; gap: 4px;
font-size: var(--ps-text-sm); font-weight: 600;
font-variant-numeric: tabular-nums;
}
.ps-tile-delta-up { color: var(--ps-emerald); }
.ps-tile-delta-down { color: var(--ps-crimson); }
/* ── 13. EMPTY STATE ───────────────────────────────────────────── */
.ps-empty {
text-align: center;
padding: var(--ps-space-8) var(--ps-space-6);
color: var(--ps-text-muted);
display: flex; flex-direction: column; align-items: center; gap: var(--ps-space-3);
}
.ps-empty-icon {
width: 48px; height: 48px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--ps-brand-tint);
color: var(--ps-brand-500);
font-size: 20px;
}
.ps-empty-title { color: var(--ps-text); font-size: var(--ps-text-md); font-weight: 600; }
.ps-empty-body { max-width: 48ch; line-height: 1.6; }
/* ── 14. LOADING SKELETON ──────────────────────────────────────── */
.ps-skeleton {
display: block;
background: linear-gradient(
90deg,
var(--ps-border) 0%,
var(--ps-border-strong) 50%,
var(--ps-border) 100%
);
background-size: 200% 100%;
animation: ps-skel 1.2s ease-in-out infinite;
border-radius: var(--ps-radius);
height: 12px;
width: 100%;
}
@keyframes ps-skel {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ── 15. TOASTS / INLINE MESSAGES ──────────────────────────────── */
.ps-toast {
padding: 10px 14px;
border-radius: var(--ps-radius-md);
font-size: var(--ps-text-sm);
line-height: 1.5;
border: 1px solid transparent;
display: inline-flex; gap: 8px; align-items: flex-start;
}
.ps-toast-success { background: var(--ps-success-tint); color: var(--ps-emerald); border-color: rgba(16,185,129,0.35); }
.ps-toast-warning { background: var(--ps-warning-tint); color: var(--ps-amber); border-color: rgba(245,158,11,0.35); }
.ps-toast-danger { background: var(--ps-danger-tint); color: var(--ps-crimson); border-color: rgba(239,68,68,0.35); }
.ps-toast-info { background: var(--ps-info-tint); color: var(--ps-cyan); border-color: rgba(6,182,212,0.35); }
/* Floating stack (top-right) */
.ps-toast-stack {
position: fixed;
top: 72px; right: 24px;
z-index: 9999;
display: flex; flex-direction: column; gap: 8px;
pointer-events: none;
}
.ps-toast-stack .ps-toast {
pointer-events: auto;
background: var(--ps-surface);
box-shadow: var(--ps-elev-3);
min-width: 260px;
}
/* ── 16. MODAL / SHEET ─────────────────────────────────────────── */
.ps-modal-backdrop {
position: fixed; inset: 0;
background: var(--ps-scrim);
z-index: 9000;
display: flex; align-items: center; justify-content: center;
animation: ps-fade var(--ps-duration-2) var(--ps-ease);
}
.ps-modal {
background: var(--ps-surface);
border: 1px solid var(--ps-border);
border-radius: var(--ps-radius-xl);
box-shadow: var(--ps-elev-4);
width: min(560px, 92vw);
max-height: 85vh; overflow: auto;
padding: var(--ps-space-6);
animation: ps-pop var(--ps-duration-3) var(--ps-ease);
}
@keyframes ps-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ps-pop { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
/* ── 17. BRAND LOGO LOCKUP ─────────────────────────────────────── */
.ps-logo {
display: inline-flex;
align-items: center;
gap: var(--ps-space-2);
text-decoration: none;
color: var(--ps-text);
line-height: 1;
}
.ps-logo-mark {
width: 26px; height: 26px;
display: block;
filter: drop-shadow(0 2px 6px rgba(108,92,231,0.35));
}
.ps-logo-word {
font-size: 16px;
font-weight: 700;
letter-spacing: -0.025em;
color: var(--ps-text);
font-feature-settings: 'cv11', 'ss01';
}
.ps-logo-tagline {
font-size: 10px;
color: var(--ps-text-dim);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-left: 6px;
padding-left: 8px;
border-left: 1px solid var(--ps-border-strong);
}
/* ── 18. LAYOUT HELPERS ────────────────────────────────────────── */
.ps-stack { display: flex; flex-direction: column; gap: var(--ps-space-4); }
.ps-stack-sm { gap: var(--ps-space-2); }
.ps-stack-lg { gap: var(--ps-space-6); }
.ps-row { display: flex; gap: var(--ps-space-3); align-items: center; flex-wrap: wrap; }
.ps-row-between { display: flex; justify-content: space-between; align-items: center; gap: var(--ps-space-4); }
.ps-grid { display: grid; gap: var(--ps-space-4); }
.ps-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ps-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ps-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
.ps-grid-3, .ps-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.ps-grid-2, .ps-grid-3, .ps-grid-4 { grid-template-columns: 1fr; }
}
/* ── 19. LEGACY TOKEN BRIDGE ───────────────────────────────────── */
/* Rewire the old tokens from main.css to the new palette so every
template that currently uses var(--accent), var(--card), etc.
automatically picks up the refreshed brand. This is the single
most valuable block in this file: it rebrands the platform. */
:root {
--accent: var(--ps-brand-500);
--accent-hover: var(--ps-brand-600);
--accent-dim: var(--ps-brand-tint);
--bg: var(--ps-bg);
--bg-card: var(--ps-surface);
--bg-card-hover: var(--ps-surface-2);
--bg-input: var(--ps-bg-subtle);
--card: var(--ps-surface);
--card-alt: var(--ps-surface-2);
--surface: var(--ps-surface);
--bg-elevated: var(--ps-surface-2);
--bg-lighter: var(--ps-surface-2);
--bg-tinted: var(--ps-surface-2);
--border: var(--ps-border);
--border-light: var(--ps-border-strong);
--border-subtle: var(--ps-border);
--text: var(--ps-text);
--text-muted: var(--ps-text-muted);
--text-secondary:var(--ps-text-muted);
--text-dim: var(--ps-text-dim);
--muted: var(--ps-text-muted);
--faint: var(--ps-text-dim);
--green: var(--ps-emerald);
--green-dim: var(--ps-success-tint);
--yellow: var(--ps-amber);
--yellow-dim:var(--ps-warning-tint);
--red: var(--ps-crimson);
--red-dim: var(--ps-danger-tint);
--orange: var(--ps-orange);
--orange-dim:rgba(249,115,22,0.12);
--blue: var(--ps-cyan);
--blue-dim: var(--ps-info-tint);
--blue-light:var(--ps-info-tint);
--purple: var(--ps-violet);
--purple-light: var(--ps-brand-tint);
--radius: var(--ps-radius-lg);
--radius-sm: var(--ps-radius);
--shadow: var(--ps-elev-2);
}
[data-theme="dark"] {
--accent: var(--ps-brand-500);
--accent-hover: var(--ps-brand-400);
--accent-dim: var(--ps-brand-tint);
--bg: var(--ps-bg);
--bg-card: var(--ps-surface);
--bg-card-hover: var(--ps-surface-2);
--bg-input: var(--ps-bg-subtle);
--border: var(--ps-border);
--border-light: var(--ps-border-strong);
--text: var(--ps-text);
--text-muted: var(--ps-text-muted);
--text-dim: var(--ps-text-dim);
--green: var(--ps-emerald);
--yellow: var(--ps-amber);
--red: var(--ps-crimson);
--orange: var(--ps-orange);
--blue: var(--ps-cyan);
--purple: var(--ps-violet);
--shadow: var(--ps-elev-2);
}
/* ── 20. REDUCED MOTION ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ── 21. PRINT ─────────────────────────────────────────────────── */
@media print {
.ps-card, .ps-tile { box-shadow: none; border: 1px solid #ccc; }
.ps-btn, .ps-tabs { display: none !important; }
}
/* ─────────────────────────────────────────────────────────────────
22. 2026-04-29 DESIGN AUDIT FIXES
Foundational rules added to fix many findings at once.
See audit/design_*_2026-04-29.md for the full ledger.
───────────────────────────────────────────────────────────────── */
/* D-UX-31: Global focus-visible — anywhere we missed an explicit
ring, fall back to the brand ring instead of the browser default.
Order matters: this comes AFTER section 4 so the ``:where()`` rule
above wins for explicit interactive elements; this catches the rest.
*/
*:focus-visible {
outline: 2px solid var(--ps-brand-500);
outline-offset: 2px;
}
/* D-A11Y-07: minimum touch-target 44×44 for icon-only close buttons
and similar tap-targets. Apply via class so we don't blow up dense
inline icons that share space with text. */
.ps-touch-target {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* D-A11Y-07: bump sidebar nav-link padding to clear 44px tall.
``.nav-links a`` is the legacy main.css selector — design-system can
reach in safely because main.css declares it with low specificity. */
.nav-links a,
.nav-section-toggle {
min-height: 44px;
padding-top: 10px;
padding-bottom: 10px;
}
/* D-UX-15: bump mobile breakpoint from 680px (iPad mini = 768px)
to 1024px so the sidebar collapses on tablet portrait. The
collapse class itself still lives in main.css; this expands the
trigger range. */
@media (max-width: 1024px) {
body.has-sidebar .sidebar:not(.mobile-open) {
transform: translateX(-100%);
}
}
/* D-UX-16 / D-UX-30 / D-A11Y-05: shared ``.ps-table`` base — sticky
header, hover row, semantic spacing. Pages that have hand-rolled
tables can opt in by adding ``ps-table`` to their ``
``. */
.ps-table {
width: 100%;
border-collapse: collapse;
font-size: var(--ps-text-base);
color: var(--ps-text);
}
.ps-table caption.sr-only,
.ps-table caption { /* visually hidden by .sr-only but exposed to AT */
}
.ps-table thead th {
position: sticky;
top: 0;
z-index: var(--ps-z-sticky);
background: var(--ps-surface);
border-bottom: 1px solid var(--ps-border);
text-align: left;
font-weight: 600;
font-size: var(--ps-text-sm);
letter-spacing: 0.01em;
text-transform: uppercase;
color: var(--ps-text-muted);
padding: 10px 12px;
white-space: nowrap;
}
.ps-table tbody tr {
border-bottom: 1px solid var(--ps-border);
transition: background var(--ps-duration-1) var(--ps-ease);
}
.ps-table tbody tr:hover {
background: var(--ps-bg-subtle);
}
.ps-table tbody td {
padding: 12px;
vertical-align: middle;
}
.ps-table tbody tr.is-clickable { cursor: pointer; }
.ps-table tbody tr.is-clickable:hover {
background: var(--ps-brand-tint);
}
.ps-table .ps-table-empty {
padding: 40px 16px;
text-align: center;
color: var(--ps-text-muted);
font-size: var(--ps-text-sm);
}
/* D-UX-08: canonical card primitives. ``.ps-card`` is already defined
above — these are modifier variants for the most common feature
patterns so we can phase out 39+ bespoke ``-card`` classes. */
.ps-card-stat {
display: flex;
flex-direction: column;
gap: var(--ps-space-1);
padding: var(--ps-space-4);
background: var(--ps-surface);
border: 1px solid var(--ps-border);
border-radius: var(--ps-radius-lg);
}
.ps-card-stat-label {
font-size: var(--ps-text-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ps-text-muted);
font-weight: 600;
}
.ps-card-stat-value {
font-size: var(--ps-text-2xl);
font-weight: 700;
color: var(--ps-text);
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.ps-card-stat-sub {
font-size: var(--ps-text-sm);
color: var(--ps-text-muted);
}
/* D-UX-36 / D-T-12: status tags — single source of truth. Replaces
``.logo-version``, inline ``Beta``,
``.nav-badge-pro``, ``.ps-chip ps-chip-brand`` for the same intent.
*/
.ps-tag {
display: inline-flex;
align-items: center;
padding: 2px 7px;
border-radius: var(--ps-radius-pill);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
vertical-align: middle;
line-height: 1.4;
white-space: nowrap;
}
.ps-tag-beta {
background: var(--ps-brand-tint);
color: var(--ps-brand-500);
border: 1px solid var(--ps-brand-500);
}
.ps-tag-pro {
background: linear-gradient(135deg, var(--ps-brand-500), var(--ps-violet));
color: #FFFFFF;
}
.ps-tag-new {
background: var(--ps-success-tint);
color: var(--ps-success);
border: 1px solid var(--ps-success);
}
/* D-UX-48: shared truncation helper for inline ```` containing
long URLs / API keys / webhook secrets. */
.code-clip {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
font-family: var(--ps-font-mono);
font-size: 12px;
background: var(--ps-bg-subtle);
padding: 2px 6px;
border-radius: var(--ps-radius-sm);
color: var(--ps-text);
}
/* D-UX-50: skeleton loading state. Animated shimmer in light + dark. */
.ps-skel {
display: inline-block;
background: linear-gradient(
90deg,
var(--ps-bg-subtle) 0%,
var(--ps-border) 50%,
var(--ps-bg-subtle) 100%
);
background-size: 200% 100%;
border-radius: var(--ps-radius-sm);
animation: ps-skel-shimmer 1.4s ease-in-out infinite;
color: transparent;
user-select: none;
}
.ps-skel-line { height: 12px; width: 100%; }
.ps-skel-line-short { height: 12px; width: 40%; }
.ps-skel-block { height: 80px; width: 100%; }
@keyframes ps-skel-shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
.ps-skel { animation: none; }
}
/* D-A11Y-19: error banner contrast. ``--ps-crimson #EF4444`` on a
crimson 10% tint fails 4.5:1; use a stronger red for text.
Define a paired token + utility classes. */
:root {
--ps-danger-text: #B91C1C;
}
[data-theme="dark"] {
--ps-danger-text: #FCA5A5;
}
.ps-banner-error,
.ps-error-banner {
background: var(--ps-danger-tint);
border: 1px solid color-mix(in srgb, var(--ps-danger) 35%, transparent);
color: var(--ps-danger-text);
padding: 10px 14px;
border-radius: var(--ps-radius);
font-size: var(--ps-text-base);
line-height: 1.4;
}
/* D-A11Y-26: ``inert`` polyfill helper. When a modal opens, mark the
sibling ``main`` and ``aside`` regions as ``inert`` so background
content is not Tab-able. We pair the attribute with this utility
so older browsers still hide pointer events visually. */
[inert],
[inert] * {
pointer-events: none;
cursor: default;
}
/* D-UX-09 confirm-dialog primitive */
.ps-confirm-overlay {
position: fixed;
inset: 0;
background: var(--ps-scrim);
display: flex;
align-items: center;
justify-content: center;
z-index: var(--ps-z-modal);
padding: 16px;
}
.ps-confirm-card {
background: var(--ps-surface);
border-radius: var(--ps-radius-lg);
border: 1px solid var(--ps-border);
box-shadow: var(--ps-elev-3);
max-width: min(440px, 92vw);
width: 100%;
padding: 24px 28px;
}
.ps-confirm-title {
font-size: var(--ps-text-lg);
font-weight: 600;
margin: 0 0 8px;
color: var(--ps-text);
}
.ps-confirm-msg {
font-size: var(--ps-text-base);
line-height: 1.55;
color: var(--ps-text-muted);
margin: 0 0 20px;
}
.ps-confirm-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}
/* D-UX-34: utility to collapse non-essential topbar controls below
1280px so the bar doesn't wrap on 1024-1280 viewports. */
@media (max-width: 1280px) {
.hide-on-narrow { display: none !important; }
}
/* D-UX-19: required-field asterisk styling. The asterisk itself is
``aria-hidden="true"`` because screen readers already announce
"required" from the input's ``required`` attribute — this is purely
a visual cue. */
.ps-required {
color: var(--ps-danger);
font-weight: 700;
margin-left: 4px;
}
/* D-A11Y-30 / D-A11Y-08: delta-cell colour redundancy.
Pre-existing pattern: delta cells were red/green-coloured numbers
only — fails for red/green colour-blind users. Apply ``.ps-delta``
to the cell + a directional class; CSS injects an arrow glyph so
the meaning is conveyed by both colour AND shape.
Usage:
| +12 |
-3.5% |
±0 |
*/
.ps-delta {
display: inline-flex;
align-items: center;
gap: 4px;
font-variant-numeric: tabular-nums;
font-weight: 600;
white-space: nowrap;
}
.ps-delta-up { color: var(--ps-success); }
.ps-delta-down { color: var(--ps-danger); }
.ps-delta-flat { color: var(--ps-text-muted); }
.ps-delta-up::before { content: "▲"; font-size: 0.85em; line-height: 1; }
.ps-delta-down::before { content: "▼"; font-size: 0.85em; line-height: 1; }
.ps-delta-flat::before { content: "—"; font-size: 0.85em; line-height: 1; opacity: 0.6; }
@media (prefers-reduced-motion: no-preference) {
/* Subtle pulse on first render so users notice the directional cue. */
.ps-delta-up::before { animation: ps-delta-rise 360ms var(--ps-ease) 1; }
.ps-delta-down::before { animation: ps-delta-fall 360ms var(--ps-ease) 1; }
}
@keyframes ps-delta-rise { from { transform: translateY(2px); opacity: 0; } }
@keyframes ps-delta-fall { from { transform: translateY(-2px); opacity: 0; } }
/* D-UX-37 (compromise): the user's prior preference is strict
accordion — only one section open at a time. The audit's concern
was that the section containing the active link gets hidden when
the user opens a sibling. Compromise: keep accordion behaviour but
render a small left-edge bar on the section toggle when its body
contains the active link AND is currently collapsed, so the user
sees a visual breadcrumb of "you're viewing a page in this
collapsed section". When the section is open the bar is hidden.
The ``.has-active-link`` class is set by base.html accordion JS
(see applyInitialState there). */
.nav-section.has-active-link:not(.nav-section-open) > .nav-section-toggle {
position: relative;
}
.nav-section.has-active-link:not(.nav-section-open) > .nav-section-toggle::before {
content: "";
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 3px;
border-radius: var(--ps-radius-pill);
background: var(--ps-brand-500);
}
.nav-section.has-active-link:not(.nav-section-open) > .nav-section-toggle .nav-section-text {
color: var(--ps-brand-500);
font-weight: 600;
}
/* ════════════════════════════════════════════════════════════════════════
Phase 9.4 — Claude design palette (loaded LAST so its :root values
win the cascade against every earlier --ps-* / legacy declaration).
Both light + dark modes are remapped. Login / signup (standalone
templates that load design-system.css directly) and every page
extending base.html (the dashboard chrome) inherit the same warm
cream + ink + orange palette automatically.
════════════════════════════════════════════════════════════════════════ */
:root {
/* ── Claude tokens ──────────────────────────────── */
--prism-cream: #faf9f6;
--prism-cream-deep: #f5f1e8;
--prism-paper: #ffffff;
--prism-ink: #1a1818;
--prism-ink-soft: #3d3837;
--prism-muted: #6b6361;
--prism-faint: #9a928f;
--prism-rule: #e8e2d4;
--prism-rule-soft: #f0ebde;
--prism-accent: #cc785c;
--prism-accent-soft: #f4e4d8;
--prism-accent-deep: #a85d44;
--prism-serif: 'Source Serif Pro', 'Iowan Old Style', Georgia, serif;
--prism-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
/* ── Override design-system --ps-* tokens ──────── */
--ps-bg: var(--prism-cream);
--ps-bg-subtle: var(--prism-cream-deep);
--ps-surface: var(--prism-paper);
--ps-surface-2: var(--prism-cream-deep);
--ps-border: var(--prism-rule);
--ps-border-strong: var(--prism-rule);
--ps-text: var(--prism-ink);
--ps-text-muted: var(--prism-muted);
--ps-text-dim: var(--prism-faint);
--ps-accent: var(--prism-accent-deep);
--ps-accent-hover: var(--prism-accent);
--ps-brand-50: var(--prism-accent-soft);
--ps-brand-100: var(--prism-accent-soft);
--ps-brand-200: rgba(204, 120, 92, 0.30);
--ps-brand-300: rgba(204, 120, 92, 0.45);
--ps-brand-400: var(--prism-accent);
--ps-brand-500: var(--prism-accent);
--ps-brand-600: var(--prism-accent-deep);
--ps-brand-700: var(--prism-accent-deep);
--ps-brand-800: var(--prism-ink);
--ps-brand-900: var(--prism-ink);
--ps-brand-tint: rgba(204, 120, 92, 0.10);
/* ── Override legacy main.css tokens ──────────── */
--bg: var(--prism-cream);
--bg-card: var(--prism-paper);
--bg-card-hover: var(--prism-cream-deep);
--bg-input: var(--prism-cream-deep);
--bg-soft: var(--prism-cream-deep);
--bg-elevated: var(--prism-paper);
--bg-lighter: var(--prism-cream);
--bg-tinted: var(--prism-cream-deep);
--border: var(--prism-rule);
--border-light: var(--prism-rule-soft);
--border-subtle: var(--prism-rule);
--divider: var(--prism-rule);
--text: var(--prism-ink);
--text-muted: var(--prism-muted);
--text-dim: var(--prism-faint);
--text-secondary: var(--prism-ink-soft);
--muted: var(--prism-muted);
--faint: var(--prism-faint);
--card: var(--prism-paper);
--card-alt: var(--prism-cream-deep);
--surface: var(--prism-paper);
--accent: var(--prism-accent-deep);
--accent-hover: var(--prism-accent);
--accent-dim: rgba(204, 120, 92, 0.10);
--violet-100: var(--prism-accent-soft);
--violet-200: var(--prism-accent-soft);
--violet-700: var(--prism-accent-deep);
--violet-900: var(--prism-accent-deep);
--violet: var(--prism-accent-deep);
--primary: var(--prism-ink);
--primary-hover: var(--prism-accent-deep);
--gold-core: var(--prism-accent);
--gold-deep: var(--prism-accent-deep);
}
/* ── Dark-mode mapping: warm-ink palette instead of navy/purple ──
Selector matches the earlier `[data-theme="dark"]` block at line ~60
so when both apply, source-order wins (mine is later → mine wins).
We must redefine the --ps-* + legacy tokens directly, not just the
--prism-* ones, because the earlier dark block sets --ps-bg etc.
to navy values that would otherwise leak through. */
[data-theme="dark"] {
/* Dark-warm Claude palette */
--prism-cream: #1f1c19;
--prism-cream-deep: #1a1815;
--prism-paper: #25221e;
--prism-ink: #f4ebd8;
--prism-ink-soft: #d8cfbb;
--prism-muted: #a8a094;
--prism-faint: #7a7268;
--prism-rule: #3a342a;
--prism-rule-soft: #2e2922;
--prism-accent: #e08a6d;
--prism-accent-soft: #3a2a23;
--prism-accent-deep: #cc785c;
/* Re-route --ps-* tokens */
--ps-bg: var(--prism-cream);
--ps-bg-subtle: var(--prism-cream-deep);
--ps-surface: var(--prism-paper);
--ps-surface-2: var(--prism-cream-deep);
--ps-border: var(--prism-rule);
--ps-border-strong: var(--prism-rule);
--ps-text: var(--prism-ink);
--ps-text-muted: var(--prism-muted);
--ps-text-dim: var(--prism-faint);
--ps-accent: var(--prism-accent);
--ps-accent-hover: var(--prism-accent-deep);
--ps-brand-50: var(--prism-accent-soft);
--ps-brand-100: var(--prism-accent-soft);
--ps-brand-500: var(--prism-accent);
--ps-brand-600: var(--prism-accent-deep);
/* Re-route legacy main.css tokens */
--bg: var(--prism-cream);
--bg-card: var(--prism-paper);
--bg-card-hover: var(--prism-cream-deep);
--bg-input: var(--prism-cream-deep);
--bg-soft: var(--prism-cream-deep);
--bg-elevated: var(--prism-paper);
--border: var(--prism-rule);
--border-light: var(--prism-rule-soft);
--divider: var(--prism-rule);
--text: var(--prism-ink);
--text-muted: var(--prism-muted);
--text-dim: var(--prism-faint);
--muted: var(--prism-muted);
--faint: var(--prism-faint);
--card: var(--prism-paper);
--card-alt: var(--prism-cream-deep);
--surface: var(--prism-paper);
--accent: var(--prism-accent);
--accent-hover: var(--prism-accent-deep);
--primary: var(--prism-accent);
--primary-hover: var(--prism-accent-deep);
}