/* ========================================================================== Finance Bot — Design Tokens Single source of truth. Import once in the root template: ========================================================================== */ :root { /* ------------------------------------------------------------------------ Colors — Base / Background ------------------------------------------------------------------------ */ --bg-0: #07090D; /* outermost page background */ --bg-1: #0B0E14; /* main canvas under glow blobs */ --bg-2: #11151E; /* solid fallback card bg (mobile, no-blur) */ /* Colors — Glow Blobs (radial gradients on page bg, blur(80px), opacity .35–.55) */ --glow-violet: #6E3DF5; --glow-cyan: #18C8E8; --glow-emerald: #1FD69A; /* Colors — Glass surfaces */ --glass-bg: rgba(22, 27, 38, 0.78); --glass-bg-strong: rgba(22, 27, 38, 0.88); --glass-border: rgba(255, 255, 255, 0.15); --glass-border-hi: rgba(255, 255, 255, 0.22); --glass-blur: blur(24px) saturate(140%); /* Colors — Text */ --text-hi: #F3F5FA; /* headlines, numbers */ --text: #C9CEDB; /* body */ --text-mid: #8B93A7; /* labels, sublines */ --text-lo: #5A6274; /* timestamps, ISIN suffixes, inactive nav */ /* Colors — Semantic / Neon accents All accents share the same chroma/lightness family — vary only hue. */ --gain: #2BE38A; /* oklch(0.82 0.19 155) — plus, BUY, success */ --gain-glow: rgba(43, 227, 138, 0.25); --gain-text: #0A3D22; /* Lesbarer Text auf Gain-Vollton-Flächen, WCAG-konform */ --loss: #FF4D7A; /* oklch(0.68 0.22 10) — minus, SELL (magenta-red, NOT blood-red) */ --loss-glow: rgba(255, 77, 122, 0.25); --loss-text: #4A0D1E; /* Lesbarer Text auf Loss-Vollton-Flächen, WCAG-konform */ --info: #38D9F4; /* oklch(0.82 0.13 220) — links, info, focus ring */ --info-glow: rgba(56, 217, 244, 0.25); --accent: #A78BFA; /* oklch(0.75 0.16 295) — highlights, sector tags */ --warn: #F5C24A; /* oklch(0.84 0.14 85) — HOLD, calibration, warnings */ /* Heatmap fills (step scale) Thresholds: <-2 / -2…-0.5 / ±0.5 / +0.5…+2 / >+2 percent */ --heat-strong-down: rgba(255, 77, 122, 0.80); --heat-down: rgba(255, 77, 122, 0.38); --heat-flat: rgba(255, 255, 255, 0.04); --heat-up: rgba(43, 227, 138, 0.30); --heat-strong-up: rgba(43, 227, 138, 0.80); /* Sparkline dead-zone threshold (percent) — below this, stroke goes grey */ --spark-deadzone: 0.25; /* ------------------------------------------------------------------------ Typography ------------------------------------------------------------------------ */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Type scale (14px base, 1.25 rhythm) */ --fs-display: 56px; /* hero number (F&G gauge) */ --fs-h1: 28px; /* page title */ --fs-h2: 18px; /* card title */ --fs-h3: 15px; /* subtitle */ --fs-body: 14px; --fs-label: 12px; /* uppercase, +0.04em tracking */ --fs-meta: 11px; /* uppercase, +0.02em tracking */ --fs-mono-l: 22px; /* price, big */ --fs-mono-m: 13px; /* price, small */ /* Line-heights */ --lh-number: 1.1; --lh-head: 1.15; --lh-body: 1.45; /* Letter-spacing */ --tr-tight: -0.02em; /* display numbers */ --tr-head: -0.015em; /* h1 */ --tr-card: -0.01em; /* h2, card titles */ --tr-label: 0.04em; /* uppercase labels */ --tr-meta: 0.02em; /* Font weights */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; /* ------------------------------------------------------------------------ Spacing — 4 px base grid ------------------------------------------------------------------------ */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; /* Card paddings */ --pad-compact: 16px; --pad-standard: 24px; --pad-hero: 32px; /* Grid gutters */ --gutter-desktop: 20px; --gutter-mobile: 12px; /* Layout */ --content-max: 1440px; --page-pad-dt: 32px; --page-pad-mb: 16px; --header-height: 64px; /* Control heights (buttons, inputs) */ --h-control: 36px; --h-control-lg: 40px; --h-control-sm: 28px; /* Form input surface */ --input-bg: rgba(255, 255, 255, 0.04); --input-bg-hi: rgba(255, 255, 255, 0.06); --input-border: rgba(255, 255, 255, 0.10); --input-border-hi: rgba(255, 255, 255, 0.20); --input-border-er: rgba(255, 77, 122, 0.50); /* Sentiment dot colours (news cards) */ --sent-positive: var(--gain); --sent-negative: var(--loss); --sent-neutral: var(--text-lo); --sent-mixed: var(--warn); /* ------------------------------------------------------------------------ Radii ------------------------------------------------------------------------ */ --r-sm: 10px; /* buttons */ --r-md: 12px; /* tiles, compact cards, heatmap cells */ --r-lg: 16px; /* standard cards */ --r-xl: 20px; /* hero card */ --r-pill: 999px; /* badges, pills */ /* ------------------------------------------------------------------------ Shadows & Inner highlights ------------------------------------------------------------------------ */ --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 0 rgba(0, 0, 0, 0.5), 0 4px 20px rgba(0, 0, 0, 0.20); --shadow-tooltip: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 60px rgba(0, 0, 0, 0.6); --shadow-logo-glow: 0 0 18px rgba(43, 227, 138, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1); /* ------------------------------------------------------------------------ Motion ------------------------------------------------------------------------ */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --dur-hover: 120ms; --dur-state: 200ms; --dur-panel: 320ms; /* ------------------------------------------------------------------------ Z-layers ------------------------------------------------------------------------ */ --z-header: 10; --z-tooltip: 20; --z-modal: 40; } /* ========================================================================== Reduced motion — respect user preference globally. Components additionally opt-in where they animate. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dur-hover: 0ms; --dur-state: 0ms; --dur-panel: 0ms; } }