/* ============================================================
SULLIVAN DASHBOARD — DESIGN TOKENS (tokens.css)
One shared sheet consumed by every page. Ship this file first;
both light & dark themes, LTR & RTL, live here and only here.
Usage:
Theme toggle = swap data-theme attr + persist in localStorage
(same mechanism as today — key: "sul-theme").
============================================================ */
/* ---------- 1. FONTS (self-hosted — no CDN at runtime) ----------
Files served from /static/fonts/ on the VPS:
Vazirmatn[wght].woff2 (variable, Persian + Latin)
IBMPlexSans-Regular/Medium/SemiBold/Bold.woff2
IBMPlexMono-Regular/Medium.woff2
Vazirmatn = the de-facto Persian UI font (open SIL license,
tabular figures, excellent at small sizes). IBM Plex Sans is
its Latin partner: same grid-ish skeleton, real tabular-nums,
free to self-host. Plex Mono for UIDs / ids / code. */
@font-face {
font-family: "Vazirmatn";
src: url("/static/fonts/Vazirmatn[wght].woff2") format("woff2-variations");
font-weight: 100 900;
font-display: swap;
}
@font-face { font-family: "IBM Plex Sans"; src: url("/static/fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/static/fonts/IBMPlexSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/static/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/static/fonts/IBMPlexSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/static/fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
/* ---------- 2. THEME-INDEPENDENT TOKENS ---------- */
:root {
/* Font stacks. --font-fa leads with Vazirmatn so Persian blocks
just set font-family: var(--font-fa). Latin chrome uses
--font-latin; Vazirmatn sits in its fallback chain so mixed
lines never fall to Times. */
--font-latin: "IBM Plex Sans", "Vazirmatn", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-fa: "Vazirmatn", "IBM Plex Sans", system-ui, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
/* Type scale (px; data-dense tool ⇒ small steps, 13px body) */
--fs-2xs: 11px; /* badge text, table meta */
--fs-xs: 12px; /* hints, timestamps, column headers */
--fs-sm: 13px; /* BODY DEFAULT: table cells, inputs */
--fs-md: 14px; /* emphasized body, drawer body */
--fs-lg: 16px; /* card titles */
--fs-xl: 19px; /* page/section titles */
--fs-2xl: 24px; /* stat-tile numbers */
--fs-3xl: 30px; /* hero stat (Cockpit) */
--lh-tight: 1.25;
--lh-body: 1.5;
--lh-fa: 1.9; /* Persian needs taller lines */
--fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
/* Spacing scale (4px base) */
--sp-05: 2px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
/* Radii */
--r-1: 6px; /* inputs, buttons, badges */
--r-2: 10px; /* cards, tiles */
--r-3: 14px; /* drawer, modal */
--r-full: 999px;
/* Z-layers (nothing else may invent a z-index) */
--z-sticky: 10; /* sticky table headers, mini-TOC */
--z-header: 20; /* global app header */
--z-dropdown: 30; /* menus, column pickers */
--z-drawer: 40; /* profile drawer + its scrim */
--z-modal: 50;
--z-toast: 60;
--z-tooltip: 70;
/* Motion (micro-transitions only) */
--t-fast: 120ms; /* hover, press, toggle */
--t-med: 180ms; /* tab panes, dropdown, toast */
--t-slow: 240ms; /* drawer, modal */
--ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
--ease-inout: cubic-bezier(0.45, 0, 0.25, 1);
}
/* ---------- 3. DARK THEME (default — the tool is dark-first) ---------- */
:root, [data-theme="dark"] {
color-scheme: dark;
/* Neutrals — cool near-blacks, never pure #000 */
--bg: oklch(0.185 0.010 260);
--surface: oklch(0.225 0.012 260); /* cards, table rows */
--surface-2: oklch(0.265 0.014 260); /* nested chips, input bg */
--surface-3: oklch(0.30 0.015 260); /* hover on surface-2 */
--border: oklch(0.32 0.015 260);
--border-strong: oklch(0.43 0.018 260);
--text: oklch(0.93 0.005 260);
--text-muted: oklch(0.72 0.010 260);
--text-faint: oklch(0.57 0.012 260); /* AA only ≥ --fs-lg; else decorative */
/* Accent (interactive: buttons, links, focus, active tab) */
--accent: oklch(0.68 0.14 250);
--accent-strong: oklch(0.60 0.16 250); /* pressed / primary bg */
--on-accent: oklch(0.985 0.002 250);
--accent-soft: oklch(0.30 0.06 250); /* selected-row tint */
/* OUTCOME SEMANTICS — fixed vocabulary (Part C). Triads:
-fg (text/icon) · -bg (row tint, badge fill) · -bd (badge border) */
--win-fg: oklch(0.80 0.15 152); --win-bg: oklch(0.28 0.05 152); --win-bd: oklch(0.44 0.09 152);
--loss-fg: oklch(0.78 0.15 27); --loss-bg: oklch(0.28 0.05 27); --loss-bd: oklch(0.44 0.09 27);
--riskfree-fg: oklch(0.80 0.13 235); --riskfree-bg: oklch(0.28 0.05 235); --riskfree-bd: oklch(0.44 0.09 235);
--open-fg: oklch(0.80 0.13 300); --open-bg: oklch(0.28 0.05 300); --open-bd: oklch(0.44 0.09 300);
--pending-fg: oklch(0.80 0.12 190); --pending-bg: oklch(0.28 0.05 190); --pending-bd: oklch(0.44 0.09 190);
--expired-fg: oklch(0.72 0.010 260); --expired-bg: oklch(0.27 0.012 260); --expired-bd: oklch(0.40 0.015 260);
--warn-fg: oklch(0.82 0.14 80); --warn-bg: oklch(0.30 0.06 80); --warn-bd: oklch(0.48 0.10 80);
/* Derived semantic aliases */
--ok: var(--win-fg); --danger: var(--loss-fg); --danger-strong: oklch(0.55 0.19 27);
--money-pos: var(--win-fg); --money-neg: var(--loss-fg);
--has-assets-tint: oklch(0.255 0.030 152); /* CRM "has assets" row */
/* Shadows (dark = subtle; borders do most of the work) */
--shadow-1: 0 1px 2px oklch(0 0 0 / 0.25);
--shadow-2: 0 4px 12px oklch(0 0 0 / 0.35);
--shadow-3: 0 12px 32px oklch(0 0 0 / 0.5); /* drawer, modal */
--scrim: oklch(0.10 0.01 260 / 0.6);
--focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}
/* ---------- 4. LIGHT THEME ---------- */
[data-theme="light"] {
color-scheme: light;
--bg: oklch(0.965 0.004 90); /* warm paper, not #fff */
--surface: oklch(0.995 0.002 90);
--surface-2: oklch(0.945 0.005 260);
--surface-3: oklch(0.915 0.007 260);
--border: oklch(0.885 0.008 260);
--border-strong: oklch(0.78 0.012 260);
--text: oklch(0.25 0.015 260);
--text-muted: oklch(0.48 0.015 260);
--text-faint: oklch(0.62 0.012 260);
--accent: oklch(0.52 0.16 250);
--accent-strong: oklch(0.46 0.17 250);
--on-accent: oklch(0.985 0.002 250);
--accent-soft: oklch(0.93 0.03 250);
--win-fg: oklch(0.46 0.13 152); --win-bg: oklch(0.95 0.035 152); --win-bd: oklch(0.83 0.07 152);
--loss-fg: oklch(0.50 0.16 27); --loss-bg: oklch(0.95 0.030 27); --loss-bd: oklch(0.84 0.07 27);
--riskfree-fg: oklch(0.48 0.13 235); --riskfree-bg: oklch(0.95 0.030 235); --riskfree-bd: oklch(0.84 0.06 235);
--open-fg: oklch(0.48 0.14 300); --open-bg: oklch(0.95 0.030 300); --open-bd: oklch(0.85 0.06 300);
--pending-fg: oklch(0.47 0.11 190); --pending-bg: oklch(0.95 0.030 190); --pending-bd: oklch(0.84 0.06 190);
--expired-fg: oklch(0.50 0.012 260); --expired-bg: oklch(0.94 0.005 260); --expired-bd: oklch(0.85 0.008 260);
--warn-fg: oklch(0.55 0.13 80); --warn-bg: oklch(0.96 0.045 80); --warn-bd: oklch(0.85 0.09 80);
--ok: var(--win-fg); --danger: var(--loss-fg); --danger-strong: oklch(0.48 0.18 27);
--money-pos: var(--win-fg); --money-neg: var(--loss-fg);
--has-assets-tint: oklch(0.965 0.020 152);
--shadow-1: 0 1px 2px oklch(0.2 0.01 260 / 0.08);
--shadow-2: 0 4px 12px oklch(0.2 0.01 260 / 0.10);
--shadow-3: 0 12px 32px oklch(0.2 0.01 260 / 0.18);
--scrim: oklch(0.25 0.01 260 / 0.4);
--focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}
/* ---------- 5. GLOBAL BASE (the only element rules in this file) ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-latin);
font-size: var(--fs-sm);
line-height: var(--lh-body);
/* ALL data is numeric-aligned by default — Part B #12 */
font-variant-numeric: tabular-nums;
}
/* Persian / RTL block helper — the ONE way to make an RTL island.
…
(numbers inside stay readable;
wrap Latin tickers/UIDs in — see a11y spec §bidi.) */
.fa {
font-family: var(--font-fa);
line-height: var(--lh-fa);
text-align: start;
}
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-1); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}