/* ========================================================================== QUANT WHAL3 — Design System Foundations Colors, type scale, spacing, shadows, radii. Light / ultra-minimal / ElevenLabs-inspired + one bold accent. -------------------------------------------------------------------------- Three accent palettes ship side-by-side as data-theme switches on : [data-theme="signal"] → Signal Orange (default — Claude-ish warm) [data-theme="whale"] → Whale Yellow (Binance-ish) [data-theme="ferrari"] → Ferrari Red (alert / ferrari) The rest (neutrals, type, shadows) stays identical — accent is the only variable. ========================================================================== */ /* --- Webfonts: SF Mono (provided) ---------------------------------------- */ @font-face { font-family: 'SF Mono'; src: url('./fonts/SF-Mono-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'SF Mono'; src: url('./fonts/SF-Mono-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'SF Mono'; src: url('./fonts/SF-Mono-RegularItalic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'SF Mono'; src: url('./fonts/SF-Mono-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'SF Mono'; src: url('./fonts/SF-Mono-Semibold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'SF Mono'; src: url('./fonts/SF-Mono-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'SF Mono'; src: url('./fonts/SF-Mono-Heavy.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; } /* --- Display + Body families (Google Fonts substitutions) ---------------- */ /* NOTE: Display = "Geist" (close to ElevenLabs' Waldenburg at weight 300 — thin, geometric, slightly humanist). Body = "Inter". FLAG these to the user so they can supply the real brand display face if different. */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Inter:wght@400;500;600;700&display=swap'); /* ========================================================================== 1. COLOR TOKENS ========================================================================== */ :root { /* ---- Canvas & surface (the "paper") --------------------------------- */ --canvas: #fafbfc; /* near-white off-white — user specified */ --paper: #f3f5f8; /* slightly lifted — section bg */ --surface: #ffffff; /* card, panel, input */ --surface-alt: #f6f7f9; /* zebra row, subtle panel */ /* ---- Ink (text) ------------------------------------------------------ */ --ink-900: #0b0d12; /* headings, primary text */ --ink-700: #2b2f3a; /* body */ --ink-500: #5b6272; /* secondary */ --ink-400: #8a90a0; /* muted, captions */ --ink-300: #b3b8c4; /* placeholder, disabled */ --ink-200: #d3d7de; /* ultra-muted */ /* ---- Line / hairline borders ---------------------------------------- */ --line: #dce0e7; /* standard hairline */ --line-strong: #c3c8d2; --line-soft: rgba(11, 13, 18, 0.05); --line-softer: rgba(11, 13, 18, 0.03); /* ---- Semantic (financial facts — kept neutral & desaturated) -------- */ --pos: #1f9d55; /* green — gain / long */ --pos-soft: rgba(31, 157, 85, 0.10); --neg: #c83232; /* red — loss / short */ --neg-soft: rgba(200, 50, 50, 0.10); --warn: #b8801f; /* amber for risk / DD warning */ --warn-soft: rgba(184, 128, 31, 0.12); --info: #1f6feb; /* blue — info only, NOT accent */ --info-soft: rgba(31, 111, 235, 0.10); /* ---- Accent (the ONE bold color — overridden per theme) ------------- */ --accent: #e8622c; /* default: Signal Orange */ --accent-hover: #d55420; --accent-ink: #ffffff; /* text on accent fill */ --accent-soft: rgba(232, 98, 44, 0.10); --accent-ring: rgba(232, 98, 44, 0.35); --accent-name: "Signal Orange"; /* ---- Chart series (neutral-forward, accent-led) --------------------- */ --chart-1: var(--accent); --chart-2: #0b0d12; --chart-3: #5b6272; --chart-4: #1f6feb; --chart-5: #1f9d55; --chart-6: #b8801f; --chart-grid: rgba(11, 13, 18, 0.06); } /* ---- Theme variants ---------------------------------------------------- */ [data-theme="signal"] { --accent: #e8622c; --accent-hover: #d55420; --accent-ink: #ffffff; --accent-soft: rgba(232, 98, 44, 0.10); --accent-ring: rgba(232, 98, 44, 0.35); --accent-name: "Signal Orange"; } [data-theme="whale"] { --accent: #f0b90b; /* Binance yellow */ --accent-hover: #d9a608; --accent-ink: #0b0d12; /* yellow needs dark text */ --accent-soft: rgba(240, 185, 11, 0.14); --accent-ring: rgba(240, 185, 11, 0.45); --accent-name: "Whale Yellow"; } [data-theme="ferrari"] { --accent: #d4001a; /* Ferrari red */ --accent-hover: #b10015; --accent-ink: #ffffff; --accent-soft: rgba(212, 0, 26, 0.10); --accent-ring: rgba(212, 0, 26, 0.35); --accent-name: "Ferrari Red"; } /* ========================================================================== 2. TYPOGRAPHY ========================================================================== */ :root { --font-display: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', 'Menlo', monospace; /* Scale (modular, 1.200 minor third, anchored at 16px body) */ --fs-hero: clamp(56px, 7vw, 88px); --fs-display: clamp(40px, 5vw, 56px); --fs-h1: 40px; --fs-h2: 32px; --fs-h3: 24px; --fs-h4: 20px; --fs-lead: 18px; --fs-body: 15px; --fs-small: 13px; --fs-micro: 11px; --fs-tiny: 10px; --lh-tight: 1.08; --lh-snug: 1.22; --lh-normal: 1.5; --lh-relaxed: 1.7; --tr-tight: -0.02em; --tr-normal: 0; --tr-wide: 0.02em; --tr-mono: 0; /* mono never tracks */ --tr-kicker: 0.14em; /* uppercase kickers */ } /* --- Semantic type classes (apply directly to elements) ---------------- */ .ds-hero { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); color: var(--ink-900); } .ds-display { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); color: var(--ink-900); } .ds-h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--ink-900); } .ds-h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--ink-900); } .ds-h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--ink-900); } .ds-h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--ink-900); } .ds-lead { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-lead); line-height: var(--lh-normal); color: var(--ink-700); } .ds-body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--ink-700); } .ds-small { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--ink-500); } .ds-micro { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-micro); line-height: 1.3; color: var(--ink-500); } /* The "kicker" — tiny uppercase mono label above big numbers. Signature of terminal / quant interfaces. */ .ds-kicker { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-tiny); letter-spacing: var(--tr-kicker); text-transform: uppercase; color: var(--ink-400); } /* Mono data — the workhorse. Tabular nums + no kerning. */ .ds-mono, .ds-metric, .ds-code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "cv01" 1; letter-spacing: var(--tr-mono); } .ds-metric { font-weight: 500; font-size: 28px; line-height: 1.1; color: var(--ink-900); } .ds-metric-xl { font-size: 48px; font-weight: 400; } .ds-metric-sm { font-size: 16px; } .ds-code { font-weight: 400; font-size: var(--fs-small); line-height: 1.6; color: var(--ink-700); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; } /* ========================================================================== 3. SPACING / RADII / SHADOWS / MOTION ========================================================================== */ :root { /* Spacing (4-based) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; /* Radii — sharper than ElevenLabs. Quant/technical feel. */ --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 14px; --r-2xl: 20px; --r-pill: 9999px; /* Shadows — extremely restrained, hairline-first */ --sh-hairline: 0 0 0 1px var(--line); --sh-1: 0 1px 2px rgba(11, 13, 18, 0.04), 0 0 0 1px var(--line); --sh-2: 0 2px 8px rgba(11, 13, 18, 0.04), 0 0 0 1px var(--line); --sh-3: 0 8px 24px rgba(11, 13, 18, 0.06), 0 0 0 1px var(--line); --sh-focus: 0 0 0 3px var(--accent-ring); --sh-inset: inset 0 0 0 1px var(--line); /* Motion */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 0.6, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; } /* ========================================================================== 4. BASE ELEMENT RESETS (opt-in via .ds-root) ========================================================================== */ .ds-root, .ds-root * { box-sizing: border-box; } .ds-root { background: var(--canvas); color: var(--ink-900); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .ds-root h1 { @apply ds-h1; } .ds-root p { color: var(--ink-700); } /* Links — quiet, underline on hover */ .ds-root a { color: var(--ink-900); text-decoration: none; border-bottom: 1px solid var(--ink-200); transition: border-color var(--dur-base) var(--ease-out); } .ds-root a:hover { border-bottom-color: var(--accent); } /* Horizontal rule — always hairline */ .ds-root hr { border: none; border-top: 1px solid var(--line); margin: var(--s-8) 0; } /* Tabular numbers for any table.data */ table.ds-table { border-collapse: collapse; width: 100%; font-family: var(--font-mono); font-size: var(--fs-small); font-variant-numeric: tabular-nums; } table.ds-table th, table.ds-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: right; } table.ds-table th:first-child, table.ds-table td:first-child { text-align: left; } table.ds-table th { font-weight: 500; color: var(--ink-400); text-transform: uppercase; font-size: var(--fs-tiny); letter-spacing: var(--tr-kicker); } table.ds-table tr:hover td { background: var(--surface-alt); }