/* PMP Production — Design Tokens Single source of truth for color, type, spacing, radius, elevation. Curated theming: Light/Dark themes + accent + density. No per-element knobs. Theme is applied via [data-theme] and density via [data-density] on . */ :root { /* Accent (overridable at runtime via --pmp-accent set on :root). Default is the Graphite teal; works on both light + dark surfaces. */ --accent: var(--pmp-accent, #14b8a6); --accent-weak: color-mix(in srgb, var(--accent) 12%, transparent); --accent-soft: color-mix(in srgb, var(--accent) 20%, transparent); --accent-text: #ffffff; /* Type scale */ /* System font stack — no external/web fonts (offline-safe) */ --pmp-font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --pmp-font-mono: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace; --font-sans: var(--pmp-font-ui); --font-mono: var(--pmp-font-mono); --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-lg: 15px; --fs-xl: 18px; --fs-2xl: 22px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Radius */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px; /* Spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; /* Layout */ --rail-w: 196px; --rail-w-compact: 60px; --topbar-h: 50px; --tabbar-h: 40px; /* Motion */ --t-fast: 120ms ease; --t-med: 220ms ease; /* Elevation (subtle, flat-first) */ --shadow-pop: 0 6px 24px rgba(15, 23, 42, 0.12); --shadow-ring: 0 0 0 3px var(--accent-soft); --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06); --shadow-card-hover: 0 6px 16px rgba(16, 24, 40, 0.10); --selected-fg: #000000; /* selected/active label color — inverts to white in dark mode */ --th-bg: #1e2a44; /* table header — Slate Pro dark bar */ --th-fg: #ffffff; --th-fg-dim: rgba(255, 255, 255, 0.62); } /* ============ Themes ============ Three selectable themes. Rail/header use dedicated tokens so Slate Pro can have a navy navigation rail over light content while other themes use surface rails. --rail-* : navigation rail --topbar-border : header underline weight */ /* ---- Slate Pro (light, navy rail) — DEFAULT ---- */ :root, [data-theme="slate"] { --bg-app: #f4f6f9; --bg-surface: #ffffff; --bg-surface-2: #eef1f5; --bg-surface-3: #e2e7ee; --bg-hover: #eef2f7; --bg-selected: var(--accent-weak); --bg-inverse: #0f2540; --text-1: #1a2233; --text-2: #5b6678; --text-3: #97a1b2; --text-inverse: #ffffff; --text-accent: #0d9488; --border-1: #e2e7ee; --border-2: #d0d7e1; --border-strong: #b6c0cd; --ok-bg: #e7f6ec; --ok-text: #137333; --ok-border: #a6e0b8; --warn-bg: #fef4e6; --warn-text: #b25e09; --warn-border: #f3cf94; --err-bg: #fdecec; --err-text: #c01b1b; --err-border: #f3b4b4; --info-bg: #e8f1fe; --info-text: #1456b8; --info-border: #b6d3f7; --accent-text: #ffffff; --rail-bg: #0f2540; --rail-text: #c5d2e4; --rail-text-strong: #ffffff; --rail-muted: #7e8ea8; --rail-active-bg: rgba(255,255,255,.10); --rail-active-text: #ffffff; --rail-border: #1b3354; --rail-group: #6c7f9e; --rail-accent: var(--accent); --brand-valve: #f59e0b; --topbar-border: 2px solid #0f2540; --header-weight: 600; } /* ---- Clarity (clean light, surface rail) ---- */ [data-theme="clarity"] { --bg-app: #f6f7f9; --bg-surface: #ffffff; --bg-surface-2: #f2f4f7; --bg-surface-3: #e9edf2; --bg-hover: #f0f3f7; --bg-selected: var(--accent-weak); --bg-inverse: #0f172a; --text-1: #0f172a; --text-2: #475467; --text-3: #98a2b3; --text-inverse: #f8fafc; --text-accent: #0d9488; --border-1: #e4e7ec; --border-2: #d0d5dd; --border-strong: #b4bcc8; --ok-bg: #e7f6ec; --ok-text: #137333; --ok-border: #a6e0b8; --warn-bg: #fef4e6; --warn-text: #b25e09; --warn-border: #f3cf94; --err-bg: #fdecec; --err-text: #c01b1b; --err-border: #f3b4b4; --info-bg: #e8f1fe; --info-text: #1456b8; --info-border: #b6d3f7; --accent-text: #ffffff; --rail-bg: var(--bg-surface); --rail-text: var(--text-2); --rail-text-strong: var(--text-1); --rail-muted: var(--text-3); --rail-active-bg: var(--bg-selected); --rail-active-text: var(--text-accent); --rail-border: var(--border-1); --rail-group: var(--text-3); --rail-accent: var(--accent); --brand-valve: #0d9488; --topbar-border: 1px solid var(--border-1); --header-weight: 600; } /* ---- Graphite (dark) ---- */ [data-theme="graphite"], [data-theme="dark"] { --bg-app: #0a0f17; --bg-surface: #131a26; --bg-surface-2: #161e2c; --bg-surface-3: #1d2738; --bg-hover: #1e2838; --bg-selected: var(--accent-soft); --bg-inverse: #e6edf6; --text-1: #e6edf6; --text-2: #9aa7b8; --text-3: #67748a; --text-inverse: #0a0f17; --text-accent: #2dd4bf; --border-1: #243044; --border-2: #2f3d54; --border-strong: #3c4d68; --ok-bg: #11271a; --ok-text: #6ee7a0; --ok-border: #1f5236; --warn-bg: #2a1f0d; --warn-text: #f0b66a; --warn-border: #5c421a; --err-bg: #2a1212; --err-text: #f49090; --err-border: #5c2424; --info-bg: #0f1f38; --info-text: #7fb4ff; --info-border: #1f3a63; --accent-text: #ffffff; --rail-bg: #0d141f; --rail-text: var(--text-2); --rail-text-strong: var(--text-1); --rail-muted: var(--text-3); --rail-active-bg: var(--accent-soft); --rail-active-text: var(--text-accent); --rail-border: var(--border-1); --rail-group: var(--text-3); --rail-accent: var(--accent); --brand-valve: #f59e0b; --topbar-border: 1px solid var(--border-1); --header-weight: 600; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-card-hover: 0 6px 18px rgba(0, 0, 0, 0.42); --selected-fg: #ffffff; --th-bg: #243044; /* dark-mode table header — distinct from surface */ --th-fg: #ffffff; --th-fg-dim: rgba(255, 255, 255, 0.6); } /* ---- Density presets ---- */ [data-density="comfortable"] { --row-h: 36px; --cell-pad-y: 8px; --cell-pad-x: 12px; --tree-row-h: 28px; --tree-fs: var(--fs-md); } [data-density="compact"], :root { --row-h: 28px; --cell-pad-y: 5px; --cell-pad-x: 9px; --tree-row-h: 24px; --tree-fs: var(--fs-sm); }