/* ============================================================ Design tokens — the single source of truth for the UI system. Load order contract: tokens.css FIRST, then themes.css, then all component stylesheets. See docs in the redesign plan. Tier 3 (structural): mode/theme-independent scales. Tier 2 (semantic): light-mode defaults; [data-mode="dark"] remaps these in themes.css (active PR7+). Accent family: TRANSITIONAL aliases reading the legacy theme engine's vars (--primary-*), which themes.js still sets inline on . PR7 flips these to concrete per-theme values in themes.css and deletes the legacy engine. ============================================================ */ :root { /* ---- Tier 3: spacing (4px base) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* ---- Tier 3: radius ---- */ --r-xs: 4px; /* micro icon buttons, inset panels, tiny chips */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px; --r-control: 6px; /* buttons + inputs (quiet-precision: de-pilled 2026-08-17) */ /* ---- Tier 3: z-index ladder ---- */ --z-blob: -1; --z-content: 1; --z-sticky: 100; --z-popover: 400; --z-busy: 600; /* app-busy loader overlay: above shell, below modals */ --z-modal: 800; --z-modal-blocking: 900; --z-toast: 1000; /* ---- Tier 3: shell geometry ---- */ /* Single source of truth for chrome offsets. Anything that must clear the dock (toasts, sticky theads, scroll-padding) reads these instead of hardcoding a height. */ --dock-h: 70px; --tabbar-h: 60px; /* mobile bottom tab bar (≤640px) */ --toast-top: calc(var(--dock-h) + 12px); /* ---- Tier 3: typography ---- */ /* Webfonts (Space Grotesk / Inter) prepend to these stacks in PR8 */ --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; /* ---- Tier 3: motion ---- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1); --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* reserved: selection feedback only */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-theme: 600ms; /* ---- Tier 2: semantic colors (light mode defaults) ---- Values are the app's CURRENT palette so introducing the token layer changes nothing visually; PR8 retunes them for glass. */ --bg-field: #f3f4f6; /* Dark lamp base — the field the shader/fallback uses in DARK mode */ --lamp-field: #0A0614; /* The page field behind everything: near-white brand-tinted in light mode (the shader computes its exact per-theme value; this is the pre-paint/overscroll/no-WebGL approximation), dark lamp in dark mode (overridden in themes.css). Redesign 2026-08-16: light mode runs the SAME lava at full strength on a pastel palette. */ --field-page: #F5F3FA; --surface-1: #ffffff; /* cards / panels */ --surface-2: #f9fafb; /* nested / inset */ --stroke-1: #e5e7eb; /* borders */ --stroke-2: #d1d5db; /* input borders */ --text-1: #1f2937; /* headings */ --text-2: #374151; /* body */ --text-3: #6b7280; /* muted */ --text-4: #9ca3af; /* faint */ --text-on-accent: #ffffff; /* Financial + status semantics (never reused as theme accents) */ --status-gain: #10b981; --status-gain-strong: #059669; --status-gain-bg: #d1fae5; --status-gain-border: #86efac; --status-gain-text: #065f46; --status-loss: #ef4444; --status-loss-strong: #dc2626; --status-loss-bg: #fee2e2; --status-loss-border: #fca5a5; --status-loss-text: #991b1b; --status-info: #3b82f6; --status-info-bg: #dbeafe; --status-info-border: #93c5fd; --status-info-text: #1e40af; --status-warn: #f59e0b; --status-warn-bg: #fef3c7; --status-warn-border: #fcd34d; /* Chart semantics */ --chart-grid: rgba(15, 23, 42, 0.08); --chart-axis-text: #6b7280; /* ---- Tier 2: elevation (current Tailwind-v2 values; glass retune in PR8) ---- */ --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-3: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* ---- Accent family: defaults (= Aurora light) ---- Overridden per theme by the [data-theme] blocks in themes.css. */ --accent: #7C3AED; --accent-strong: #6D28D9; --accent-soft: #EDE9FE; --accent-deep: #5B21B6; --accent-bright: #8B5CF6; --accent-badge: #6D28D9; --accent-text: #7C3AED; /* ---- Legacy bridge ---- styles.css still consumes the old engine's var names; they now track the new accent family. Removed in PR8 with legacy CSS. */ --primary-color: var(--accent); --primary-hover: var(--accent-strong); --primary-light: var(--accent-soft); --primary-dark: var(--accent-deep); --primary-accent: var(--accent-bright); --badge-color: var(--accent-badge); } /* Tabular numerals for anything a trader compares or watches change. font-family upgrade lands with the webfonts in PR8. */ .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }