/* ============================================================ Purser Design System — TOKENS (single source of truth) Working name: "Purser" (placeholder — final product name TBD) One language, two modes. Light is the default; dark is a deliberate premium mode. Drive the mode with [data-theme] on (set by the in-app toggle); with no attribute set, the OS preference decides. Never hardcode a colour in a component — always use a token. ============================================================ */ :root{ /* native controls (date pickers, scrollbars, select popups) must follow the in-app toggle, not the OS — so each mode states its own scheme. */ color-scheme: light; /* — Brand accent (indigo in light, one identity) — */ --accent: #4B45E4; --accent-strong: #3D37C9; /* pressed / emphasis text */ --accent-ink: #FFFFFF; /* text/icons ON the accent */ --accent-bg: #EEEDFD; /* tint behind accent chips */ --accent-2: #0A7A76; /* secondary (avatars, 2nd series) — AA with white on top */ --on-accent-2: #FFFFFF; /* text/icons ON accent-2 */ /* — Neutrals (cool family — never mix in warm greys) — */ --canvas: #F5F6F9; /* app background */ --surface: #FFFFFF; /* cards, sheets */ --surface-2: #F1F3F7; /* insets, inputs */ --chrome: #FFFFFF; /* top bar + sidebar */ --ink: #191B23; /* primary text */ --ink-soft: #4A5060; /* secondary text — AA on canvas + surface */ --ink-faint: #656B7B; /* labels, meta, placeholders — AA (was #989EAD, 2.7:1) */ --line: #E6E8F0; /* hairlines */ --line-strong: #D7DAE4; /* input borders */ /* — Semantic (status; separate from the accent) — */ /* darkened from #05925E / #D63535 / #B26A12 so 11px pill + delta text clears AA on both white and its own tint. Dark mode already passed. */ --good: #07784C; --good-bg: #E6F5EE; --bad: #C22B2B; --bad-bg: #FBEAEA; --warn: #99590C; --warn-bg: #FAEEDC; --info: #06706C; --info-bg: #E3F3F2; /* "viewed" / informational status */ --neutral-bg: #EDEFF4; /* — Paper: the customer-facing document. Stays light in BOTH modes — an invoice is printed output, and the client sees it on white. This is where the CUSTOMER's brand lives, not Purser's. — */ --paper: #FFFFFF; --paper-ink: #1A1B22; --paper-soft: #565B6B; --paper-faint: #6B7080; /* AA on white paper (was #8B90A0, 3.2:1) */ --paper-line: #E4E6EE; --paper-accent: #4B45E4; /* overridden per client in settings */ --on-paper-accent: #FFFFFF; /* text/marks sitting ON the customer's accent */ /* — Elevation (shadows tinted with the ink hue, never pure black) — */ --shadow-sm: 0 1px 2px rgba(20,22,40,.05); --shadow-md: 0 12px 28px -18px rgba(20,22,40,.18); --glow: 0 4px 13px -6px rgba(75,69,228,.5); --ring: 0 0 0 3px rgba(75,69,228,.18); /* input focus halo */ --ring-bad: 0 0 0 3px rgba(214,53,53,.15); /* invalid input halo */ --card-bg: var(--surface); --card-border: 1px solid var(--line); /* — Geometry (varied radii: tighter inner, softer container) — */ --r-xs: 5px; --r-sm: 7px; --r: 9px; --r-lg: 13px; --r-pill: 999px; /* — Type — */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; /* PROD: load Geist (sans) + Geist Mono via @font-face for real character. */ --fs-xs: 11px; --fs-sm: 12.5px; --fs-md: 13.5px; --fs-lg: 16px; --fs-h2: 21px; --fs-h1: 28px; --track-tight: -0.02em; --track-label: 0.07em; /* — Space scale (4px base) — */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; /* — Motion — */ --ease: cubic-bezier(.2,.6,.2,1); --dur: 180ms; } /* ---- DARK MODE --------------------------------------------------------- Applies when the OS prefers dark AND no explicit light is chosen … */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme: dark; --accent: #8E7DFF; --accent-strong: #B4A7FF; /* the dark accent is light-toned, so text sitting ON it must be dark */ --accent-ink: #16131F; --accent-bg: rgba(142,125,255,.16); --accent-2: #4472D6; --on-accent-2: #FFFFFF; --canvas: #0E0E13; --surface: #16161C; --surface-2: #1D1E27; --chrome: #0B0B10; --ink: #ECEDF2; --ink-soft: #9DA0AD; --ink-faint: #8C90A6; /* AA on surface (was #62657A, 3.4:1) */ --line: #23242F; --line-strong: #2E3042; --good: #37D399; --good-bg: rgba(55,211,153,.15); --bad: #FB7185; --bad-bg: rgba(251,113,133,.15); --warn: #E0902E; --warn-bg: rgba(224,144,46,.16); --info: #7FB4FF; --info-bg: rgba(127,180,255,.16); --neutral-bg: rgba(255,255,255,.06); /* paper deliberately does NOT invert */ --shadow-sm: inset 0 1px 0 rgba(255,255,255,.05); --shadow-md: 0 14px 32px -22px rgba(0,0,0,.85); --glow: 0 4px 16px -6px rgba(142,125,255,.6); --ring: 0 0 0 3px rgba(142,125,255,.24); --ring-bad: 0 0 0 3px rgba(251,113,133,.20); --card-bg: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); --card-border: 1px solid var(--line); } } /* … and always when explicitly toggled to dark (wins both ways). */ :root[data-theme="dark"]{ color-scheme: dark; --accent: #8E7DFF; --accent-strong: #B4A7FF; /* the dark accent is light-toned, so text sitting ON it must be dark */ --accent-ink: #16131F; --accent-bg: rgba(142,125,255,.16); --accent-2: #4472D6; --on-accent-2: #FFFFFF; --canvas: #0E0E13; --surface: #16161C; --surface-2: #1D1E27; --chrome: #0B0B10; --ink: #ECEDF2; --ink-soft: #9DA0AD; --ink-faint: #8C90A6; /* AA on surface (was #62657A, 3.4:1) */ --line: #23242F; --line-strong: #2E3042; --good: #37D399; --good-bg: rgba(55,211,153,.15); --bad: #FB7185; --bad-bg: rgba(251,113,133,.15); --warn: #E0902E; --warn-bg: rgba(224,144,46,.16); --info: #7FB4FF; --info-bg: rgba(127,180,255,.16); --neutral-bg: rgba(255,255,255,.06); /* paper deliberately does NOT invert */ --shadow-sm: inset 0 1px 0 rgba(255,255,255,.05); --shadow-md: 0 14px 32px -22px rgba(0,0,0,.85); --glow: 0 4px 16px -6px rgba(142,125,255,.6); --ring: 0 0 0 3px rgba(142,125,255,.24); --ring-bad: 0 0 0 3px rgba(251,113,133,.20); --card-bg: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); --card-border: 1px solid var(--line); }