/* AI Trading Lab - design tokens. The whole visual identity (colour, type, spacing, elevation, motion) lives here as CSS custom properties so it can change - a rename, a new palette, a rebrand - without touching a single component or page. Dark is the default and primary experience; light is a fully supported second theme, toggled via [data-theme] on (see app.js). No external fonts or CDNs (the app's CSP is self-only) - the type scale is a system-font stack tuned for a data-dense, professional interface. */ :root { /* --- type --- */ --font-sans: -apple-system, "Segoe UI", "Inter", system-ui, sans-serif; --font-mono: "Cascadia Mono", "SF Mono", "Consolas", "Menlo", monospace; --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 15px; --text-lg: 18px; --text-xl: 24px; --text-2xl: 32px; --text-3xl: 44px; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.2; --leading-normal: 1.5; /* --- spacing (4px base) --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; /* --- shape --- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 999px; /* --- motion --- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 400ms; /* --- layout --- */ --sidebar-width: 232px; --sidebar-width-collapsed: 68px; --topbar-height: 60px; --content-max-width: 1400px; /* --- semantic colours (theme-independent) --- Deliberately distinct hues so meaning is never ambiguous: brand/AI is its own colour, never reused for profit or loss. */ --brand-h: 231; --positive-h: 158; --negative-h: 353; --warning-h: 38; --info-h: 199; } /* --------------------------------------------------------------------- Dark theme (default) --------------------------------------------------------------------- */ :root, :root[data-theme="dark"] { --bg: #0a0d13; --bg-raised: #10141d; --bg-raised-2: #151b26; --bg-hover: #1b2230; --bg-inset: #0d1119; --border: #1e2635; --border-strong: #2b3648; --text: #e8edf5; --text-dim: #8c97ab; --text-faint: #57647a; --text-on-brand: #05070b; --brand: #5b7fff; --brand-dim: #263462; --brand-soft: rgba(91, 127, 255, 0.14); --positive: #34d399; --positive-dim: rgba(52, 211, 153, 0.14); --negative: #f87171; --negative-dim: rgba(248, 113, 113, 0.14); --warning: #fbbf3f; --warning-dim: rgba(251, 191, 63, 0.14); --info: #38bdf8; --info-dim: rgba(56, 189, 248, 0.14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5); --scrollbar: #2b3648; color-scheme: dark; } /* --------------------------------------------------------------------- Light theme --------------------------------------------------------------------- */ :root[data-theme="light"] { --bg: #f5f6f9; --bg-raised: #ffffff; --bg-raised-2: #f0f2f6; --bg-hover: #e9ecf2; --bg-inset: #eef0f4; --border: #dde1e9; --border-strong: #c7cdda; --text: #131826; --text-dim: #5c6579; --text-faint: #8993a6; --text-on-brand: #ffffff; --brand: #3757e6; --brand-dim: #dde5ff; --brand-soft: rgba(55, 87, 230, 0.08); --positive: #0f9d68; --positive-dim: rgba(15, 157, 104, 0.1); --negative: #d9384f; --negative-dim: rgba(217, 56, 79, 0.1); --warning: #b5790a; --warning-dim: rgba(181, 121, 10, 0.1); --info: #0d84c7; --info-dim: rgba(13, 132, 199, 0.1); --shadow-sm: 0 1px 2px rgba(20, 24, 38, 0.06); --shadow-md: 0 8px 24px rgba(20, 24, 38, 0.1); --shadow-lg: 0 16px 48px rgba(20, 24, 38, 0.14); --scrollbar: #c7cdda; color-scheme: light; }