/* =========================================================
WiseLead Design System — design tokens
Design language: "Threshold" (warm paper, ink indigo, hairline structure)
Source: Wiselead Brand Guide v2.0 (Threshold) + Rejist Design System
=========================================================
Canonical token names: --rj-*
WiseLead aliases: --wl-* (mapped 1:1 onto --rj-*)
Legacy compat aliases: --wl-color-*, --wl-space-* (for existing consumers)
Threshold semantic names (--rj-paper / --rj-ink / --rj-cyan / --rj-amber /
--rj-rule …) are provided alongside the historical --rj-blue-* / neutral names,
which are re-hued onto the Threshold palette so existing consumers inherit the
new look with no markup changes.
Font strategy:
DM Sans ONLY, self-hosted in this package (variable: weight 100-1000, optical size 9-40).
No CDN: the faces below load from ../fonts/ next to this sheet, so a page needs no
Google Fonts link, works offline and passes a strict CSP / COEP.
No second display family. Bebas Neue has been retired.
*/
/* DM Sans v4.004 (SIL Open Font License 1.1, see ../fonts/OFL.txt). Two unicode-range subsets,
the same split Google Fonts serves, so a latin-only page fetches one file. Upright only:
Threshold has no italic. */
@font-face {
font-family: "DM Sans";
font-style: normal;
font-weight: 100 1000;
font-display: swap;
src: url("../fonts/dm-sans-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "DM Sans";
font-style: normal;
font-weight: 100 1000;
font-display: swap;
src: url("../fonts/dm-sans-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* =========================================================
ROOT — light theme (default)
========================================================= */
:root {
/* ---------- Threshold core (semantic) ---------- */
--rj-paper: #FAF7F2; /* primary warm surface */
--rj-paper-deep: #F1EBE1; /* sunken / alternating band */
--rj-paper-warm: #EDE4D6; /* warmest surface / pale fill */
--rj-ink: #221B4A; /* brand indigo — text, dark surfaces, wordmark */
--rj-ink-deep: #15102F; /* deepest ink — footer, inverse-deep */
--rj-ink-soft: #5A5478; /* secondary text */
--rj-ink-faint: #655F7D; /* tertiary text, eyebrows, hints. 0.7.0: was #8A85A0 (3.3:1 on paper, failed AA); now 5.6:1 paper, 6.0:1 white, 5.1:1 paper-deep */
--rj-cyan: #2B8FD4; /* live / active / accent (logo cyan) */
--rj-cyan-deep: #1C6FAB; /* links, primary-cyan hover */
--rj-amber: #C8752B; /* single accent — hover fills, one thing at a time */
--rj-amber-light: #E8A94E;
--rj-green: #2F7D62; /* success */
--rj-red: #B4442F; /* danger */
--rj-amber-deep: #9A5A1F; /* amber as TEXT on paper (5.1:1) — --rj-amber itself is only 3.3:1 */
--rj-red-deep: #93331F; /* danger fill on hover / pressed */
--rj-rule: rgba(34, 27, 74, 0.14); /* hairline */
--rj-rule-strong: rgba(34, 27, 74, 0.28); /* stronger hairline */
--rj-rule-light: rgba(250, 247, 242, 0.16); /* hairline on ink surfaces */
/* ---------- Brand palette (historical names, re-hued to Threshold) ---------- */
--rj-blue-1: var(--rj-ink); /* Navy → Ink indigo */
--rj-blue-2: var(--rj-cyan-deep); /* Mid blue → Cyan-deep (links / primary-cyan) */
--rj-blue-3: var(--rj-cyan); /* Sky blue → Cyan (accents, focus, live) */
--rj-blue-4: #BFE0F2; /* Pale blue → Pale cyan (charts, soft wash) */
--rj-black: #15102F; /* warm black = ink-deep (no pure black in Threshold) */
--rj-ash: var(--rj-ink-faint); /* warm grey → ink-faint */
/* ---------- Neutral scale (warm: paper at the top, ink at the bottom) ---------- */
--rj-white: #FFFFFF;
--rj-neutral-50: #FAF7F2; /* paper */
--rj-neutral-100: #F1EBE1; /* paper-deep */
--rj-neutral-200: #E4DCCE; /* warm hairline surface */
--rj-neutral-300: #CFC6B6; /* warm strong border */
--rj-neutral-400: #A9A2B8; /* muted (cool warm) */
--rj-neutral-500: #8A85A0; /* scale step (pre-0.7 ink-faint); decorative only, 3.3:1 on paper, not for text */
--rj-neutral-600: #5A5478; /* ink-soft */
--rj-neutral-700: #3A3363;
--rj-neutral-800: #221B4A; /* ink */
--rj-neutral-900: #15102F; /* ink-deep */
/* ---------- Semantic colors ---------- */
--rj-success: var(--rj-green);
--rj-warning: var(--rj-amber);
--rj-danger: var(--rj-red);
--rj-info: var(--rj-cyan);
/* ---------- Surfaces ---------- */
--rj-bg: var(--rj-paper);
--rj-bg-elev: #FEFCF8; /* barely-lifted warm surface for cards */
--rj-bg-sunken: var(--rj-paper-deep);
--rj-bg-inverse: var(--rj-ink);
--rj-surface-pale: var(--rj-paper-warm);
/* ---------- Text ---------- */
--rj-fg-1: var(--rj-ink);
--rj-fg-2: #3A3363;
--rj-fg-3: var(--rj-ink-soft);
--rj-fg-4: var(--rj-ink-faint);
--rj-fg-on-brand: var(--rj-paper);
--rj-fg-link: var(--rj-cyan-deep);
--rj-fg-on-accent: #1A1204; /* text on an amber fill: warm near-black, 5.3:1 on --rj-amber */
--rj-fg-warning: var(--rj-amber-deep); /* warning copy / outlined warning on paper */
/* ---------- Borders ---------- */
--rj-border: var(--rj-rule);
--rj-border-strong: var(--rj-rule-strong);
--rj-border-focus: var(--rj-cyan);
/* ---------- Typography ---------- */
--rj-font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--rj-font-display: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--rj-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
--rj-feature-settings: "liga" 1, "clig" 1;
/* Type scale (1.25 modular) */
--rj-fs-12: 0.75rem;
--rj-fs-13: 0.8125rem;
--rj-fs-14: 0.875rem;
--rj-fs-15: 0.9375rem;
--rj-fs-16: 1rem;
--rj-fs-18: 1.125rem;
--rj-fs-20: 1.25rem;
--rj-fs-24: 1.5rem;
--rj-fs-30: 1.875rem;
--rj-fs-36: 2.25rem;
--rj-fs-48: 3rem;
--rj-fs-60: 3.75rem;
--rj-fs-80: 5rem;
--rj-lh-tight: 1.15;
--rj-lh-snug: 1.3;
--rj-lh-normal: 1.5;
--rj-lh-relaxed: 1.65;
--rj-tracking-display: -0.04em; /* Threshold display: tight */
--rj-tracking-bebas: 0.04em; /* retained alias (uppercase spacing) */
--rj-tracking-eyebrow: 0.22em; /* Threshold label spacing */
/* ---------- Spacing (4px base) ---------- */
--rj-space-0: 0;
--rj-space-1: 4px;
--rj-space-2: 8px;
--rj-space-3: 12px;
--rj-space-4: 16px;
--rj-space-5: 20px;
--rj-space-6: 24px;
--rj-space-8: 32px;
--rj-space-10: 40px;
--rj-space-12: 48px;
--rj-space-16: 64px;
--rj-space-20: 80px;
/* ---------- Radii (Threshold: crisp, near-rectangular) ---------- */
--rj-radius-xs: 2px;
--rj-radius-sm: 2px;
--rj-radius-md: 3px;
--rj-radius-lg: 4px;
--rj-radius-xl: 6px;
--rj-radius-2xl: 8px;
--rj-radius-pill: 999px;
/* ---------- Shadows / elevation (warm, ink-tinted, long & soft) ---------- */
--rj-shadow-1: 0 1px 2px rgba(34, 27, 74, 0.05);
--rj-shadow-2: 0 26px 50px -34px rgba(34, 27, 74, 0.30);
--rj-shadow-3: 0 40px 80px -50px rgba(34, 27, 74, 0.45);
--rj-shadow-focus: 0 0 0 3px rgba(43, 143, 212, 0.28);
/* ---------- Motion ---------- */
--rj-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--rj-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--rj-dur-fast: 140ms;
--rj-dur-base: 220ms;
--rj-dur-slow: 420ms;
/* ---------- Grain overlay (Threshold texture, opt-in via .rj-grain) ---------- */
--rj-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
/* ---------- Breakpoints ---------- */
--wl-breakpoint-sm: 576px;
--wl-breakpoint-md: 768px;
--wl-breakpoint-lg: 992px;
--wl-breakpoint-xl: 1200px;
--wl-breakpoint-xxl: 1600px;
/* ---------- Layout scale (page frame, used by threshold-layout.css / threshold-components.css) ---------- */
--rj-brand: var(--rj-cyan-deep); /* primary brand action (legacy alias used by product app.css) */
/* Content measure caps */
--rj-content-narrow: 760px; /* reading / docs / support */
--rj-content-comfortable: 1000px; /* forms & settings */
--rj-content-wide: 1600px; /* data-dense: dashboards, tables, lists */
--rj-content-max: 1840px; /* hard ceiling on ultra-wide displays */
/* Fluid page gutters */
--rj-page-gutter-x: clamp(1rem, 0.5rem + 2.2vw, 3rem);
--rj-page-gutter-top: clamp(1rem, 0.75rem + 1vw, 1.75rem);
/* Auto-fit grid floors */
--rj-grid-gap: var(--rj-space-4);
--rj-grid-min-stat: 220px; /* min stat-card width before wrapping */
--rj-grid-min-card: 300px; /* min content-card width before wrapping */
}
/* =========================================================
DARK THEME — [data-theme="dark"] on or
Threshold-ink dark: deep indigo surfaces, warm paper text.
========================================================= */
[data-theme="dark"] {
--rj-paper: #15102F;
--rj-paper-deep: #100C24;
--rj-paper-warm: #241C4A;
--rj-bg: #15102F;
--rj-bg-elev: #1E1740;
--rj-bg-sunken: #100C24;
--rj-bg-inverse: #FAF7F2;
--rj-surface-pale: #241C4A;
--rj-fg-1: #F4F1EA;
--rj-fg-2: #D8D3E4;
--rj-fg-3: #A9A2B8;
--rj-fg-4: #6C6688;
--rj-fg-on-brand: #15102F;
--rj-fg-link: #6FB6E6;
--rj-fg-warning: #E8A94E;
--rj-ink-faint: #8A85A0; /* the 0.7.0 light value is too dark on ink; 5.2:1 on --rj-bg here */
--rj-rule: rgba(250, 247, 242, 0.12);
--rj-rule-strong: rgba(250, 247, 242, 0.22);
--rj-border: rgba(250, 247, 242, 0.12);
--rj-border-strong: rgba(250, 247, 242, 0.22);
--rj-border-focus: #2B8FD4;
--rj-blue-1: #8B84C4; /* lifted ink for headings on dark */
--rj-blue-2: #4FA3DE;
--rj-blue-3: #2B8FD4;
--rj-blue-4: #BFE0F2;
--rj-ink: #8B84C4;
--rj-success: #4FBF9A;
--rj-warning: #E8A94E;
--rj-danger: #E0715C;
--rj-info: #6FB6E6;
--rj-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
--rj-shadow-2: 0 26px 50px -34px rgba(0, 0, 0, 0.6);
--rj-shadow-3: 0 40px 80px -50px rgba(0, 0, 0, 0.7);
--rj-shadow-focus: 0 0 0 3px rgba(43, 143, 212, 0.4);
}
/* Respect OS preference when data-theme="auto" */
@media (prefers-color-scheme: dark) {
[data-theme="auto"] {
--rj-paper: #15102F; --rj-paper-deep: #100C24; --rj-paper-warm: #241C4A;
--rj-bg: #15102F; --rj-bg-elev: #1E1740; --rj-bg-sunken: #100C24;
--rj-bg-inverse: #FAF7F2; --rj-surface-pale: #241C4A;
--rj-fg-1: #F4F1EA; --rj-fg-2: #D8D3E4; --rj-fg-3: #A9A2B8; --rj-fg-4: #6C6688;
--rj-fg-on-brand: #15102F; --rj-fg-link: #6FB6E6; --rj-fg-warning: #E8A94E; --rj-ink-faint: #8A85A0;
--rj-rule: rgba(250,247,242,0.12); --rj-rule-strong: rgba(250,247,242,0.22);
--rj-border: rgba(250,247,242,0.12); --rj-border-strong: rgba(250,247,242,0.22);
--rj-blue-1: #8B84C4; --rj-blue-2: #4FA3DE; --rj-blue-3: #2B8FD4; --rj-blue-4: #BFE0F2;
--rj-ink: #8B84C4;
--rj-success: #4FBF9A; --rj-warning: #E8A94E; --rj-danger: #E0715C; --rj-info: #6FB6E6;
--rj-shadow-1: 0 1px 2px rgba(0,0,0,0.5);
--rj-shadow-2: 0 26px 50px -34px rgba(0,0,0,0.6);
--rj-shadow-3: 0 40px 80px -50px rgba(0,0,0,0.7);
--rj-shadow-focus: 0 0 0 3px rgba(43,143,212,0.4);
}
}
/* =========================================================
--wl-* ALIASES (map 1:1 onto --rj-* canonical tokens)
========================================================= */
:root, [data-theme="dark"], [data-theme="auto"] {
/* Threshold semantic aliases */
--wl-paper: var(--rj-paper);
--wl-paper-deep: var(--rj-paper-deep);
--wl-paper-warm: var(--rj-paper-warm);
--wl-ink-deep: var(--rj-ink-deep);
--wl-ink-soft: var(--rj-ink-soft);
--wl-ink-faint: var(--rj-ink-faint);
--wl-cyan: var(--rj-cyan);
--wl-cyan-deep: var(--rj-cyan-deep);
--wl-amber: var(--rj-amber);
--wl-amber-light: var(--rj-amber-light);
--wl-green: var(--rj-green);
--wl-red: var(--rj-red);
--wl-amber-deep: var(--rj-amber-deep);
--wl-red-deep: var(--rj-red-deep);
--wl-rule: var(--rj-rule);
--wl-rule-strong: var(--rj-rule-strong);
--wl-rule-light: var(--rj-rule-light);
--wl-grain: var(--rj-grain);
--wl-navy: var(--rj-blue-1);
--wl-deep: var(--rj-ink-deep); /* 0.7.0: was #123A5E (pre-Threshold navy); deprecated alias, use --rj-ink-deep */
--wl-ink: var(--rj-ink);
--wl-mid: var(--rj-blue-2);
--wl-sky: var(--rj-blue-3);
--wl-pale: var(--rj-blue-4);
--wl-ash: var(--rj-ash);
--wl-black: var(--rj-black);
--wl-white: var(--rj-white);
--wl-neutral-50: var(--rj-neutral-50);
--wl-neutral-100: var(--rj-neutral-100);
--wl-neutral-200: var(--rj-neutral-200);
--wl-neutral-300: var(--rj-neutral-300);
--wl-neutral-400: var(--rj-neutral-400);
--wl-neutral-500: var(--rj-neutral-500);
--wl-neutral-600: var(--rj-neutral-600);
--wl-neutral-700: var(--rj-neutral-700);
--wl-neutral-800: var(--rj-neutral-800);
--wl-neutral-900: var(--rj-neutral-900);
--wl-success: var(--rj-success);
--wl-warning: var(--rj-warning);
--wl-danger: var(--rj-danger);
--wl-info: var(--rj-info);
--wl-bg: var(--rj-bg);
--wl-bg-elev: var(--rj-bg-elev);
--wl-bg-sunken: var(--rj-bg-sunken);
--wl-bg-inverse: var(--rj-bg-inverse);
--wl-surface-pale: var(--rj-surface-pale);
--wl-fg-1: var(--rj-fg-1);
--wl-fg-2: var(--rj-fg-2);
--wl-fg-3: var(--rj-fg-3);
--wl-fg-4: var(--rj-fg-4);
--wl-fg-on-brand: var(--rj-fg-on-brand);
--wl-fg-link: var(--rj-fg-link);
--wl-fg-on-accent: var(--rj-fg-on-accent);
--wl-fg-warning: var(--rj-fg-warning);
--wl-border: var(--rj-border);
--wl-border-strong: var(--rj-border-strong);
--wl-border-focus: var(--rj-border-focus);
--wl-font-sans: var(--rj-font-sans);
--wl-font-display: var(--rj-font-display);
--wl-font-mono: var(--rj-font-mono);
--wl-feature-settings: var(--rj-feature-settings);
--wl-fs-12: var(--rj-fs-12); --wl-fs-13: var(--rj-fs-13);
--wl-fs-14: var(--rj-fs-14); --wl-fs-15: var(--rj-fs-15);
--wl-fs-16: var(--rj-fs-16); --wl-fs-18: var(--rj-fs-18);
--wl-fs-20: var(--rj-fs-20); --wl-fs-24: var(--rj-fs-24);
--wl-fs-30: var(--rj-fs-30); --wl-fs-36: var(--rj-fs-36);
--wl-fs-48: var(--rj-fs-48); --wl-fs-60: var(--rj-fs-60);
--wl-fs-80: var(--rj-fs-80);
--wl-lh-tight: var(--rj-lh-tight);
--wl-lh-snug: var(--rj-lh-snug);
--wl-lh-normal: var(--rj-lh-normal);
--wl-lh-relaxed: var(--rj-lh-relaxed);
--wl-tracking-display: var(--rj-tracking-display);
--wl-tracking-bebas: var(--rj-tracking-bebas);
--wl-tracking-eyebrow: var(--rj-tracking-eyebrow);
--wl-space-0: var(--rj-space-0); --wl-space-1: var(--rj-space-1);
--wl-space-2: var(--rj-space-2); --wl-space-3: var(--rj-space-3);
--wl-space-4: var(--rj-space-4); --wl-space-5: var(--rj-space-5);
--wl-space-6: var(--rj-space-6); --wl-space-8: var(--rj-space-8);
--wl-space-10: var(--rj-space-10); --wl-space-12: var(--rj-space-12);
--wl-space-16: var(--rj-space-16); --wl-space-20: var(--rj-space-20);
--wl-radius-xs: var(--rj-radius-xs);
--wl-radius-sm: var(--rj-radius-sm);
--wl-radius-md: var(--rj-radius-md);
--wl-radius-lg: var(--rj-radius-lg);
--wl-radius-xl: var(--rj-radius-xl);
--wl-radius-2xl: var(--rj-radius-2xl);
--wl-radius-pill: var(--rj-radius-pill);
--wl-shadow-1: var(--rj-shadow-1);
--wl-shadow-2: var(--rj-shadow-2);
--wl-shadow-3: var(--rj-shadow-3);
--wl-shadow-focus: var(--rj-shadow-focus);
--wl-ease: var(--rj-ease);
--wl-ease-out: var(--rj-ease-out);
--wl-dur-fast: var(--rj-dur-fast);
--wl-dur-base: var(--rj-dur-base);
--wl-dur-slow: var(--rj-dur-slow);
/* ---------- Legacy compat aliases (--wl-color-*, --wl-space-xs etc.) ----------
These map old consumer names onto the new token system. Do not add new consumers
using these names — use --rj-* or --wl-* semantic names instead.
*/
--wl-color-brand-primary: var(--rj-blue-2);
--wl-color-brand-primary-hover: #155F92;
--wl-color-brand-secondary: var(--rj-blue-3);
--wl-color-surface-base: var(--rj-bg);
--wl-color-surface-card: var(--rj-bg-elev);
--wl-color-border-default: var(--rj-border);
--wl-color-text-primary: var(--rj-fg-1);
--wl-color-text-muted: var(--rj-fg-3);
--wl-color-danger: var(--rj-danger);
--wl-color-warning: var(--rj-warning);
--wl-color-success: var(--rj-success);
--wl-space-xs: var(--rj-space-1);
--wl-space-sm: var(--rj-space-2);
--wl-space-md: var(--rj-space-3);
--wl-space-lg: var(--rj-space-4);
--wl-space-xl: var(--rj-space-6);
--wl-space-xxl: var(--rj-space-8);
--wl-shadow-card: var(--rj-shadow-2);
/* Layout scale */
--wl-brand: var(--rj-brand);
--wl-content-narrow: var(--rj-content-narrow);
--wl-content-comfortable: var(--rj-content-comfortable);
--wl-content-wide: var(--rj-content-wide);
--wl-content-max: var(--rj-content-max);
--wl-page-gutter-x: var(--rj-page-gutter-x);
--wl-page-gutter-top: var(--rj-page-gutter-top);
--wl-grid-gap: var(--rj-grid-gap);
--wl-grid-min-stat: var(--rj-grid-min-stat);
--wl-grid-min-card: var(--rj-grid-min-card);
}
/* =========================================================
SEMANTIC TYPOGRAPHIC PRIMITIVES
========================================================= */
html {
font-size: 16px;
}
body {
font-family: var(--rj-font-sans);
font-feature-settings: var(--rj-feature-settings);
font-optical-sizing: auto;
color: var(--rj-fg-1);
background: var(--rj-bg);
line-height: var(--rj-lh-normal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Threshold uses no italics: emphasis is weight, not slant. */
em, i, cite, address, var, dfn {
font-style: normal;
}
em {
font-weight: 700;
}
/* Blazor's gives the page heading tabindex="-1"
and calls .focus() on every route change, so screen readers announce it — but
the browser then paints its default focus ring on an element a keyboard user
could never have tabbed to. tabindex="-1" is by definition never a real Tab
stop, so any focus on one of these is always programmatic; suppressing the
ring here is safe everywhere and needs no per-page override. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
outline: none;
}
.rj-display, .wl-display {
font-family: var(--rj-font-display);
font-weight: 400;
letter-spacing: var(--rj-tracking-display);
text-transform: none;
line-height: 0.94;
color: var(--rj-ink);
}
.rj-display em, .wl-display em {
font-weight: 700;
}
.rj-eyebrow, .wl-eyebrow {
font-family: var(--rj-font-sans);
font-weight: 500;
font-size: var(--rj-fs-12);
letter-spacing: var(--rj-tracking-eyebrow);
text-transform: uppercase;
color: var(--rj-ink-faint);
}
a, .rj-link, .wl-link {
color: var(--rj-fg-link);
text-decoration: none;
transition: color var(--rj-dur-fast) var(--rj-ease);
}
a:hover, .rj-link:hover, .wl-link:hover {
color: var(--rj-ink);
text-decoration: underline;
text-underline-offset: 3px;
}
/* Grain overlay — apply to a fixed full-viewport element: */
.rj-grain, .wl-grain {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 900;
opacity: 0.42;
mix-blend-mode: multiply;
background-image: var(--rj-grain);
}