/* ────────────────────────────────────────────────────────────────────── * PostNimble V2 Identity · Design Tokens * ────────────────────────────────────────────────────────────────────── * Source of truth for color, type, geometry, and motion across both the * marketing site and the application. * * Light mode lives in :root. Dark mode lives in [data-theme="dark"]:root * (and is also auto-applied via prefers-color-scheme when the user has * not explicitly chosen a theme). * * Naming convention: * --pn-* Brand-level semantic tokens (sitewide vocabulary). * --brand-* Convenience aliases for the cyan ramp. * --ink-* Ink scale (semantic — "ink-900 = highest-contrast text"). * --pink Activity / "now happening" color. * --success Real success indicator. * * Migration aliases for legacy tokens are at the bottom of this file. * Plan to remove them by v2.1. * ──────────────────────────────────────────────────────────────────── */ /* ────────────── Type families ────────────── */ :root { --font-display: 'Spectral', Georgia, 'Times New Roman', serif; --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* ────────────── Geometry ────────────── */ :root { --container: 1280px; --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --radius-xl: 24px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 12px 32px -8px rgba(15, 23, 42, 0.10); --shadow-lg: 0 24px 64px -16px rgba(15, 23, 42, 0.18); } /* ────────────── Motion ────────────── */ :root { --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --t-fast: 120ms; --t-base: 180ms; --t-slow: 400ms; --t-reveal: 500ms; } /* ────────────────────────────────────────────────────────────────────── * LIGHT MODE (default) * ──────────────────────────────────────────────────────────────────── */ :root { /* Brand cyan ramp */ --pn-cyan-deep: #0C87C1; /* primary brand · AA large only on white */ --pn-cyan-aa: #086A99; /* AA-safe cyan for small text on white */ --pn-cyan: #29A9E1; /* decorative / italic em */ --pn-cyan-soft: #E0F2FE; /* badge / pill bg */ --pn-cyan-tint: #F4FAFD; /* faintest cyan wash */ /* Convenience aliases */ --brand: var(--pn-cyan-deep); --brand-deep: var(--pn-cyan-aa); --brand-light: var(--pn-cyan); --brand-soft: var(--pn-cyan-soft); --brand-tint: var(--pn-cyan-tint); /* Activity (pipeline "now happening" highlight) */ --pn-active: #E12963; --pn-active-soft: #FDE6EE; --pink: var(--pn-active); --pink-soft: var(--pn-active-soft); /* Real success (verified, complete) */ --pn-success-green: #10B981; --pn-success-wash: #ECFDF5; --pn-success-ink: #047857; --success: var(--pn-success-green); /* Surfaces */ --pn-paper: #FFFFFF; /* page background */ --pn-panel: #F8FAFC; /* section bg / step card / stage-detail surface */ --pn-navy: #F1F5F9; /* header chrome, beta pill (legacy name) */ --bg: var(--pn-paper); --bg-warm: var(--pn-panel); --chrome: var(--pn-navy); /* Ink — semantic scale; 900 = highest contrast text */ --pn-ink-dark: #1E293B; /* body / display ink — 14.7:1 on white */ --pn-ink-muted: #64748B; /* muted body — 4.8:1 on white (AA normal) */ --pn-ink-hair: #C0C0C0; /* hairlines / dividers only — never text */ --ink-900: #1E293B; --ink-800: #283246; --ink-700: #3B475C; --ink-500: #64748B; /* AA normal */ --ink-400: #94A3B8; /* AA large only */ --ink-300: #C0C0C0; /* hairlines only — fails AA */ --ink-200: #E2E8F0; /* default border */ --ink-100: #EEF2F6; /* hover bg / placeholder */ --ink-50: #F8FAFC; /* stage-detail bg */ /* Focus ring */ --focus-ring: 0 0 0 3px rgba(12, 135, 193, 0.35); /* Selection */ --selection-bg: var(--pn-cyan); --selection-fg: #FFFFFF; /* color-scheme — tells the browser which UA defaults to use for form controls, scrollbars, and other native widgets. Light is the default; [data-theme="dark"]:root and the prefers-color-scheme @media block below override to dark when active. */ color-scheme: light; } /* Explicit data-theme="light" lock — used by paper layouts to opt out of the OS-level dark preference (the @media block at the bottom of this file only fires when no data-theme is set). */ [data-theme="light"]:root { color-scheme: light; } /* ────────────────────────────────────────────────────────────────────── * DARK MODE * ────────────────────────────────────────────────────────────────────── * The dark palette inverts surfaces and ink while keeping the brand cyan * present and lively. The bright #29A9E1 becomes the primary brand cyan * on dark (5.4:1 on --pn-paper #0F172A — passes AA normal), and the deep * #0C87C1 retires to a "history/visited" accent. * * Surface backgrounds are deep slate, not pure black — pure black against * cyan reads as harsh and unbranded. * ──────────────────────────────────────────────────────────────────── */ [data-theme="dark"]:root { color-scheme: dark; /* Brand cyan ramp — re-keyed for dark */ --pn-cyan-deep: #29A9E1; /* primary brand on dark · 5.4:1 on paper */ --pn-cyan-aa: #5BC4EE; /* AA-safe brighter cyan for body text */ --pn-cyan: #5BC4EE; /* decorative / italic em */ --pn-cyan-soft: #0F2A3D; /* dark wash for badge / pill bg */ --pn-cyan-tint: #0E1A28; /* faintest cyan wash on dark */ --brand: var(--pn-cyan-deep); --brand-deep: var(--pn-cyan-aa); --brand-light: var(--pn-cyan); --brand-soft: var(--pn-cyan-soft); --brand-tint: var(--pn-cyan-tint); /* Activity */ --pn-active: #F25C8B; /* lighter pink for visibility on dark */ --pn-active-soft: #2E1320; --pink: var(--pn-active); --pink-soft: var(--pn-active-soft); /* Success */ --pn-success-green: #34D399; /* brighter green for dark */ --pn-success-wash: #0F2C24; --pn-success-ink: #6EE7B7; --success: var(--pn-success-green); /* Surfaces — paper is the deepest layer, panel/chrome step up */ --pn-paper: #0F172A; /* page bg */ --pn-panel: #131D33; /* section bg / step card / stage detail */ --pn-navy: #1A253E; /* header chrome, beta pill */ --bg: var(--pn-paper); --bg-warm: var(--pn-panel); --chrome: var(--pn-navy); /* Ink — semantic stays the same; values invert */ --pn-ink-dark: #F1F5F9; /* body text on dark — 14.6:1 on paper */ --pn-ink-muted: #94A3B8; /* muted — 5.4:1 on paper (AA normal) */ --pn-ink-hair: #475569; /* hairlines only */ --ink-900: #F1F5F9; --ink-800: #E2E8F0; --ink-700: #CBD5E1; --ink-500: #94A3B8; /* AA normal on paper */ --ink-400: #64748B; /* AA large only */ --ink-300: #475569; /* hairlines */ --ink-200: #1F2A40; /* default border */ --ink-100: #1A2438; /* hover bg */ --ink-50: #131D33; /* stage-detail bg */ --focus-ring: 0 0 0 3px rgba(91, 196, 238, 0.45); --selection-bg: var(--pn-cyan); --selection-fg: #0F172A; /* Drop shadows on dark surfaces need a stronger black */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 12px 32px -8px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 64px -16px rgba(0, 0, 0, 0.55); } /* Auto-apply dark mode when user hasn't picked a theme. Respect explicit data-theme="light" — don't override it. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; /* Re-declare every dark value here — CSS custom properties don't cascade through media queries the way a theme attribute does. */ --pn-cyan-deep: #29A9E1; --pn-cyan-aa: #5BC4EE; --pn-cyan: #5BC4EE; --pn-cyan-soft: #0F2A3D; --pn-cyan-tint: #0E1A28; --brand: var(--pn-cyan-deep); --brand-deep: var(--pn-cyan-aa); --brand-light: var(--pn-cyan); --brand-soft: var(--pn-cyan-soft); --brand-tint: var(--pn-cyan-tint); --pn-active: #F25C8B; --pn-active-soft: #2E1320; --pink: var(--pn-active); --pink-soft: var(--pn-active-soft); --pn-success-green: #34D399; --pn-success-wash: #0F2C24; --pn-success-ink: #6EE7B7; --success: var(--pn-success-green); --pn-paper: #0F172A; --pn-panel: #131D33; --pn-navy: #1A253E; --bg: var(--pn-paper); --bg-warm: var(--pn-panel); --chrome: var(--pn-navy); --pn-ink-dark: #F1F5F9; --pn-ink-muted: #94A3B8; --pn-ink-hair: #475569; --ink-900: #F1F5F9; --ink-800: #E2E8F0; --ink-700: #CBD5E1; --ink-500: #94A3B8; --ink-400: #64748B; --ink-300: #475569; --ink-200: #1F2A40; --ink-100: #1A2438; --ink-50: #131D33; --focus-ring: 0 0 0 3px rgba(91, 196, 238, 0.45); --selection-bg: var(--pn-cyan); --selection-fg: #0F172A; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 12px 32px -8px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 64px -16px rgba(0, 0, 0, 0.55); } } /* ────────────────────────────────────────────────────────────────────── * LEGACY ALIASES — REMOVE BY v2.1 * ────────────────────────────────────────────────────────────────────── * These exist to make the V2 Identity rebrand a one-PR cutover. Every * legacy token name resolves to its new value so existing components * don't visually break the moment the new tokens land. * * IMPORTANT: --pn-success in V1 was the magenta #E12963. In V2 it maps * to --pn-active so existing call-sites don't suddenly change color, BUT * those call-sites are likely wrong — "success" was the wrong name for * an activity color. Audit every --pn-success usage and re-point it to * either --pn-success-green (for real affirmations) or leave it on * --pn-active (for "now happening" pipeline-style activity). * ──────────────────────────────────────────────────────────────────── */ :root, [data-theme="dark"]:root { /* Cyan renames (V1 called this "violet") */ --pn-violet-deep: var(--pn-cyan-deep); --pn-violet: var(--pn-cyan); --pn-violet-soft: var(--pn-cyan-soft); /* Misnamed pink — V1 called it "success" */ --pn-success: var(--pn-active); /* TODO audit + remove */ /* --pn-ink is the PRIMARY high-contrast text color for the entire V1 component layer (postnimble.css): body text, headings, nav labels, button text on the dark app shell all resolve through it. It MUST be the highest-contrast ink, not a hairline gray. Bug fixed 2026-06-02: this previously aliased to --pn-ink-hair (#475569 dark / #C0C0C0 light — "never text"). Because this rule's [data-theme="dark"]:root selector has higher specificity (0,2,0) than postnimble.css's plain :root (0,1,0), it WON on every dark app page — painting ~2:1 slate-on-navy text that was effectively unreadable. The paper/light pages were unaffected (they don't match [data-theme=dark]), which is why only the back-end app looked broken. Now matches postnimble.css's own intent (--pn-ink: var(--ink-900)): dark → #F1F5F9 on #1A253E navy ≈ 14:1 light → #1E293B on light ≈ 14:1 */ --pn-ink: var(--ink-900); } /* ──────────────────────────────────────────────────────────────────── */ ::selection { background: var(--selection-bg); color: var(--selection-fg); } /* ────────────────────────────────────────────────────────────────────── * Reduced motion — global safety net * ────────────────────────────────────────────────────────────────────── * Per WCAG 2.3.3 + V2 brief Phase 4. Collapses every transition and * animation to near-zero when the user has expressed a motion preference. * Per-element opt-outs (e.g. a critical loading spinner) can override * this via more-specific selectors. Caret blinks and progress shimmers * across the V2 surfaces all flatten under this rule. * ──────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }