/* ───────────────────────────────────────────────────────────────────────── CSPTracker Design Tokens — single source of truth for color, type, space, radius, shadow, motion, and elevation. Loaded FIRST in so every other stylesheet (styles.css, tdp-polish.css, page-local CSS) references the same variables. Palette: dark navy trading dashboard — preserved from the original styles.css. Token DISCIPLINE adopted from open-design (Apache-2.0). Conventions: --color-* semantic colors (foreground, background, border) --bg-* surface tokens (legacy alias kept for back-compat) --text-* text foreground tokens (legacy alias kept) --primary-* brand colors (legacy alias kept) --tdp-* TD Pro polish tokens (legacy alias kept) --fs-* typographic scale (rem) --space-* spacing scale (rem) --radius-* corner radii --shadow-* elevation --motion-* timing + easing --ring-* focus ring ───────────────────────────────────────────────────────────────────────── */ :root { /* ── BRAND ─────────────────────────────────────────────────────────── */ --primary-color: var(--mg-blue); --primary-dark: var(--mg-blue-dim); --primary-soft: rgba(63, 123, 255, 0.12); --primary-glow: rgba(63, 123, 255, 0.25); --accent-color: var(--mg-gold); --accent-hot: #f0c674; --accent-soft: rgba(232, 181, 77, 0.12); --accent-glow: rgba(232, 181, 77, 0.25); /* ── SEMANTIC STATUS ───────────────────────────────────────────────── */ --success-color: var(--mg-green-base); --success-soft: rgba(16, 185, 129, 0.15); --success-bright: var(--mg-green); /* replaces rogue #2ed573 */ --danger-color: var(--mg-red-base); --danger-soft: rgba(239, 68, 68, 0.15); --danger-bright: var(--mg-red); /* replaces rogue #ff4d4f */ --warning-color: var(--mg-gold); --warning-soft: rgba(232, 181, 77, 0.15); --warning-bright: var(--mg-gold); /* replaces rogue #ff9f43 */ --info-color: var(--mg-blue-hi); --info-soft: rgba(111, 155, 255, 0.15); --purple-color: #5b8def; --purple-soft: rgba(91, 141, 239, 0.15); /* ── SURFACES ──────────────────────────────────────────────────────── */ --bg-primary: var(--mg-bg); --bg-secondary: var(--mg-surface); --bg-tertiary: rgba(30, 41, 59, 0.6); --bg-overlay: rgba(2, 6, 23, 0.72); --card-bg: linear-gradient(135deg, rgba(30, 41, 59, 0.55), rgba(15, 23, 42, 0.75)); --card-bg-elevated: linear-gradient(135deg, rgba(30, 41, 59, 0.75), rgba(15, 23, 42, 0.85)); /* ── BORDERS ───────────────────────────────────────────────────────── */ --border-color: rgba(148, 163, 184, 0.14); --border-color-strong: rgba(148, 163, 184, 0.25); --border-color-soft: rgba(148, 163, 184, 0.08); /* ── TEXT ──────────────────────────────────────────────────────────── */ --text-primary: var(--mg-text); --text-secondary: #c3d0e8; --text-muted: var(--mg-text-muted); --text-faint: var(--mg-text-dim); --text-disabled: var(--mg-text-faint); /* ── TYPOGRAPHY ────────────────────────────────────────────────────── */ /* TD Pro design system fonts: Space Grotesk (UI) · JetBrains Mono (numbers/code). Swapped from Outfit / Space Mono to match the Agent Marketplace surface. */ --font-display: var(--mg-font-display); --font-body: var(--mg-font-display); --font-mono: var(--mg-font-mono); /* Type scale — modular ratio ≈ 1.2, anchored at 14px */ --fs-xs: 0.6875rem; /* 11px — labels, captions */ --fs-sm: 0.8125rem; /* 13px — secondary copy */ --fs-base: 0.9375rem; /* 15px — body */ --fs-md: 1rem; /* 16px — emphasized body */ --fs-lg: 1.125rem; /* 18px — section heads */ --fs-xl: 1.375rem; /* 22px — page heads */ --fs-2xl: 1.75rem; /* 28px — stat numbers */ --fs-3xl: 2.25rem; /* 36px — hero numbers */ --lh-tight: 1.2; --lh-snug: 1.4; --lh-normal: 1.55; --lh-loose: 1.7; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.1em; /* uppercase labels */ /* ── SPACING (4px grid) ────────────────────────────────────────────── */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 2.5rem; /* 40px */ --space-8: 3rem; /* 48px */ /* Legacy spacing aliases — old code uses --space-1..5 with different values. Aliased to the closest match so existing pages don't visually shift. */ --space-legacy-1: 0.5rem; --space-legacy-2: 0.85rem; --space-legacy-3: 1.25rem; --space-legacy-4: 1.75rem; --space-legacy-5: 2.25rem; /* ── RADIUS ────────────────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* ── SHADOWS / ELEVATION ───────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.20); --shadow: 0 1px 2px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.25); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.25); --shadow-lg: 0 18px 48px rgba(2, 6, 23, 0.55), 0 8px 16px rgba(0, 0, 0, 0.30); --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(63, 123, 255, 0.10); --shadow-amber: 0 0 0 1px rgba(232, 181, 77, 0.25), 0 6px 18px rgba(232, 181, 77, 0.15); /* ── MOTION ────────────────────────────────────────────────────────── */ --motion-fast: 120ms; --motion-base: 180ms; --motion-slow: 280ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-pop: cubic-bezier(0.21, 1.02, 0.73, 1); /* ── FOCUS RING ────────────────────────────────────────────────────── */ --ring-color: var(--accent-color); --ring-soft: rgba(232, 181, 77, 0.30); --ring-width: 2px; --ring-offset: 2px; /* ── TREEMAP / DATA-VIZ GRADIENTS ──────────────────────────────────── */ --treemap-cool-from: #3f7bff; /* indigo, replaces #3f7bff */ --treemap-cool-to: #7c3aed; /* violet, replaces #764ba2 */ --treemap-warn-from: #ec4899; /* pink, replaces #f093fb */ --treemap-warn-to: #f43f5e; /* rose, replaces #f5576c */ /* ──────────────────────────────────────────────────────────────────── */ /* TD Pro polish aliases — kept so tdp-polish.css and any consumer of */ /* --tdp-* tokens keeps working without churn. */ /* ──────────────────────────────────────────────────────────────────── */ --tdp-accent: var(--accent-color); --tdp-accent-hot: var(--accent-hot); --tdp-accent-glow: var(--accent-glow); --tdp-accent-soft: rgba(232, 181, 77, 0.06); --tdp-card-bg: rgba(17, 22, 51, 0.6); --tdp-card-border: rgba(63, 123, 255, 0.15); --tdp-card-divider: rgba(63, 123, 255, 0.10); --tdp-card-elevate: rgba(30, 41, 59, 0.75); --tdp-bull: var(--success-color); --tdp-bear: var(--danger-color); --tdp-info: var(--info-color); --tdp-purple: var(--purple-color); --tdp-text-strong: #f1f5f9; --tdp-text: var(--text-secondary); --tdp-text-mute: var(--text-muted); --tdp-text-faint: var(--text-disabled); --tdp-font-mono: var(--font-mono); --tdp-font-display: var(--font-display); /* Legacy --shadow alias kept for any existing references */ --shadow-base: var(--shadow); }