/* ========================================= CSS Custom Properties — Design Tokens Premium Dark Trading Design System ========================================= */ :root { /* ---- Color System ---- Layered, semantic, dark-mode-first. Names follow use, not raw value. */ /* Surfaces */ --color-bg-base: #05080f; /* page */ --color-bg-deep: #02040a; /* deeper, for the Earth canvas backdrop */ --color-bg-elevated: #0a1020; /* sidebar, modal */ --color-bg-card: #0b1322; /* default card */ --color-bg-card-hover: #0e1828; /* card hover */ --color-bg-card-alt: #0d1729; /* alt card */ --color-bg-input: #060c18; /* input */ --color-bg-input-hover: #0a1322; --color-bg-overlay: rgba(2, 5, 12, 0.78); --color-bg-glass: rgba(11, 19, 34, 0.72); --color-bg-glass-strong:rgba(11, 19, 34, 0.92); /* Borders — subtle blue-gray, never pure black */ --color-border: rgba(120, 145, 190, 0.10); --color-border-soft: rgba(120, 145, 190, 0.06); --color-border-strong: rgba(120, 145, 190, 0.18); --color-border-hover: rgba(120, 145, 190, 0.22); --color-border-focus: rgba(79, 172, 254, 0.55); --color-border-accent: rgba(79, 172, 254, 0.32); /* Text — AA contrast on dark surfaces */ --color-text-primary: #f1f5fb; /* 15.8:1 on #05080f */ --color-text-secondary: #9aa6b9; /* 6.4:1 on #05080f */ --color-text-muted: #5a6a85; /* 4.7:1 on #05080f (large text only) */ --color-text-disabled: #3a4a64; --color-text-inverse: #05080f; /* Brand / Accent — electric blue */ --color-accent: #4facfe; --color-accent-bright: #6fb8ff; --color-accent-deep: #2a7fdf; --color-accent-dim: rgba(79, 172, 254, 0.14); --color-accent-glow: rgba(79, 172, 254, 0.22); --color-accent-soft: rgba(79, 172, 254, 0.08); /* Subtle gold for the brand mark only */ --color-gold: #c9a96e; --color-gold-dim: rgba(201, 169, 110, 0.14); /* Semantic */ --color-profit: #22c55e; --color-profit-bright: #34d673; --color-profit-dim: rgba(34, 197, 94, 0.12); --color-profit-glow: rgba(34, 197, 94, 0.22); --color-loss: #ef4444; --color-loss-bright: #f56565; --color-loss-dim: rgba(239, 68, 68, 0.12); --color-loss-glow: rgba(239, 68, 68, 0.22); --color-neutral: #94a3b8; --color-neutral-dim: rgba(148, 163, 184, 0.12); --color-warning: #f59e0b; --color-warning-dim: rgba(245, 158, 11, 0.12); /* ---- Typography ---- */ --font-sans: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SFMono-Regular', monospace; --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* Modular type scale (1.25 ratio, 15px base) */ --text-2xs: 0.6875rem; /* 11px */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.9375rem; /* 15px */ --text-md: 1.0625rem; /* 17px */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 2rem; /* 32px */ --text-3xl: 2.625rem; /* 42px */ --text-4xl: 3.5rem; /* 56px */ --text-5xl: 4.5rem; /* 72px */ --weight-light: 300; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; --leading-none: 1; --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.55; --leading-relaxed:1.7; --tracking-tighter: -0.04em; --tracking-tight: -0.025em; --tracking-snug: -0.012em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.06em; --tracking-widest: 0.12em; /* ---- Spacing Scale (4pt rhythm) ---- */ --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.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ---- Layout ---- */ --sidebar-width: 256px; --sidebar-width-collapsed: 72px; --header-height: 64px; --content-max-width: 1280px; --hero-max-width: 1440px; /* ---- Radius ---- */ --radius-xs: 3px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-3xl: 36px; --radius-full: 9999px; /* ---- Shadows — deep, layered, subtle blue tint ---- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55); --shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.65); --shadow-2xl: 0 32px 120px rgba(0, 0, 0, 0.75); --shadow-glow-accent: 0 0 32px rgba(79, 172, 254, 0.18); --shadow-glow-profit: 0 0 32px rgba(34, 197, 94, 0.16); --shadow-glow-loss: 0 0 32px rgba(239, 68, 68, 0.16); --shadow-card: 0 1px 0 var(--color-border-soft) inset, 0 1px 2px rgba(0, 0, 0, 0.30), 0 8px 24px rgba(0, 0, 0, 0.30); --shadow-card-hover: 0 1px 0 var(--color-border-strong) inset, 0 2px 4px rgba(0, 0, 0, 0.30), 0 16px 48px rgba(0, 0, 0, 0.50); --shadow-modal: 0 1px 0 var(--color-border-soft) inset, 0 24px 80px rgba(0, 0, 0, 0.65); /* ---- Glassmorphism Backdrop ---- */ --glass-blur-sm: saturate(140%) blur(8px); --glass-blur-md: saturate(160%) blur(16px); --glass-blur-lg: saturate(180%) blur(24px); /* ---- Motion Tokens ---- Per UI/UX Pro Max: shared tokens, not one-duration-fits-all. */ --ease-default: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* material standard */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* smooth deceleration */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* spring overshoot */ --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); /* iOS-style */ --duration-instant: 80ms; --duration-fast: 150ms; /* hover, focus, small state */ --duration-base: 220ms; /* button press, color */ --duration-slow: 320ms; /* modals, sheets */ --duration-slower: 480ms; /* page enter, section reveal */ --duration-page: 600ms; /* page-level transitions */ /* Stagger step (used by --stagger) */ --duration-stagger: 50ms; /* ---- Z-Index Scale ---- */ --z-behind: -1; --z-base: 0; --z-raised: 10; --z-sticky: 20; --z-overlay: 100; --z-modal: 200; --z-toast: 300; --z-tooltip: 400; /* ---- Touch target ---- */ --touch-min: 44px; /* ---- Focus ring ---- */ --focus-ring: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-accent); /* ---- Ring drawing (animated SVG circles) ---- */ --ring-circumference: 283; --ring-offset: 0; }