/* ============================================================================ VendGrade , Design Tokens One cool blue-grey system. Light is :root; dark is the same scale inverted, applied by setting data-theme="dark" on (or any ancestor). Saturated color is reserved for MEANING ONLY (risk tier + aging/status). Everything else is the quiet neutral foundation. ========================================================================== */ :root { /* ---- Foundation (cool blue-grey) ---- */ --vg-bg: #f5f7f9; /* app canvas */ --vg-surface: #ffffff; /* cards, bars, headers */ --vg-surface-2: #eef2f7; /* subtle fills, wells */ --vg-border: #e3e8ef; /* hairlines */ --vg-border-strong: #cdd5e0; /* dividers, control edges */ --vg-text: #1b2432; /* primary (deep slate) */ --vg-text-2: #565f73; /* secondary */ --vg-text-3: #8b93a3; /* tertiary / meta */ /* ---- Accent (the one trustworthy blue: links + primary actions) ---- */ --vg-accent: #2f5fd0; --vg-accent-weak: #e9f0fd; /* tinted bg for active nav, wells */ --vg-accent-strong: #2249a8; /* text on weak bg, active labels */ /* ---- Semantic: RISK TIER (deliberate, not a traffic light) ---- */ --vg-critical: #a12a30; /* deep red */ --vg-critical-bg: #f6e8e9; --vg-critical-line: #c33a41; /* markers / bars */ --vg-important: #8f6410; /* ochre amber */ --vg-important-bg: #f6efdf; --vg-important-line:#c6941f; --vg-standard: #45577f; /* slate blue */ --vg-standard-bg: #eaeef6; --vg-standard-line: #7d8db2; /* ---- Semantic: AGING / STATUS ---- */ --vg-overdue: #a12a30; /* SLA breached / overdue */ --vg-overdue-bg: #f6e8e9; --vg-attention: #8f6410; /* due soon / expiring */ --vg-attention-bg: #f6efdf; --vg-ok: #2c6a4f; /* on track / adequate */ --vg-ok-bg: #e7f1eb; /* ---- Typography ---- */ --vg-font-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --vg-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Sans states; mono substantiates (every fact, number, date, "because"). */ --vg-fs-display: 26px; --vg-fw-display: 800; --vg-fs-title: 17px; --vg-fw-title: 800; --vg-fs-h2: 16px; --vg-fw-h2: 700; --vg-fs-item: 14.5px;--vg-fw-item: 700; --vg-fs-body: 13.5px; --vg-fs-small: 12.5px; --vg-fs-mono: 11.5px; --vg-fs-label: 9.5px; /* uppercase, tracked */ --vg-tracking-label: 0.09em; --vg-tracking-tight: -0.02em; /* ---- Spacing (4px base) ---- */ --vg-space-1: 4px; --vg-space-2: 8px; --vg-space-3: 12px; --vg-space-4: 16px; --vg-space-5: 20px; --vg-space-6: 24px; --vg-space-8: 32px; /* ---- Radius ---- */ --vg-radius-sm: 6px; --vg-radius-md: 8px; --vg-radius-lg: 11px; --vg-radius-xl: 14px; /* ---- Elevation (used sparingly; hierarchy is weight + whitespace) ---- */ --vg-shadow-card: 0 1px 3px rgba(20, 30, 50, 0.05); --vg-shadow-float: 0 24px 60px -20px rgba(20, 30, 50, 0.28); } /* ============================================================================ DARK , same scale inverted. Same accent, same reserved semantics. ========================================================================== */ [data-theme="dark"] { --vg-bg: #0f131a; --vg-surface: #161b24; --vg-surface-2: #1c232f; --vg-border: #28303c; --vg-border-strong: #3a4451; --vg-text: #e8edf4; --vg-text-2: #9aa4b6; --vg-text-3: #657085; --vg-accent: #5b8bef; --vg-accent-weak: #182741; --vg-accent-strong: #9cc0ff; --vg-critical: #e08088; --vg-critical-bg: #271719; --vg-critical-line: #b8434c; --vg-important: #d3a24a; --vg-important-bg: #251f14; --vg-important-line:#9c7526; --vg-standard: #93a6cf; --vg-standard-bg: #1a2130; --vg-standard-line: #55638a; --vg-overdue: #e08088; --vg-overdue-bg: #271719; --vg-attention: #d3a24a; --vg-attention-bg: #251f14; --vg-ok: #5fae86; --vg-ok-bg: #132018; --vg-shadow-float: 0 24px 60px -20px rgba(0, 0, 0, 0.55); }