/* ============================================================= crypto-tools shared design tokens Load this BEFORE tool-specific CSS. Each tool may override --ct-accent (and friends) in its own :root to keep brand-recognizable accent while sharing the rest. ============================================================= */ /* Shared fonts — every tool that loads theme.css gets the same stack. */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Syne:wght@700;800&display=swap'); :root { /* Surfaces */ --ct-bg: #080810; --ct-bg-elevated: #0f0f1a; --ct-bg-input: rgba(255, 255, 255, 0.04); --ct-bg-input-strong: rgba(0, 0, 0, 0.3); --ct-bg-overlay: rgba(0, 0, 0, 0.8); --ct-bg-hover: rgba(124, 58, 237, 0.06); /* Container widths */ --ct-container: 1280px; /* default: hub, funding, hashdive, bitget */ --ct-container-wide: 1600px; /* data-heavy: analyzer, polytracker */ /* Text */ --ct-text: #e2e8f0; --ct-text-muted: #94a3b8; --ct-text-dim: #64748b; --ct-text-faint: #475569; /* Borders */ --ct-border: rgba(255, 255, 255, 0.06); --ct-border-strong: rgba(255, 255, 255, 0.12); --ct-border-accent: rgba(124, 58, 237, 0.2); /* Universal semantic colors */ --ct-positive: #22c55e; --ct-positive-soft: rgba(34, 197, 94, 0.12); --ct-negative: #ef4444; --ct-negative-soft: rgba(239, 68, 68, 0.12); --ct-warning: #f59e0b; --ct-info: #3b82f6; /* Tool accent — default = hub purple. Tools can opt into a palette by adding body.theme-{blue,red,amber,cyan} (see rules below). */ --ct-accent: #7c3aed; --ct-accent-hover: #6d28d9; --ct-accent-soft: rgba(124, 58, 237, 0.15); --ct-accent-ghost: color-mix(in srgb, var(--ct-accent) 8%, transparent); --ct-accent-text: #ffffff; /* text color on top of accent bg */ /* Per-tool accent palette — used by the hub + any cross-tool UI. */ --ct-accent-bybit: #f59e0b; --ct-accent-poly: #7c3aed; --ct-accent-hash: #06b6d4; --ct-accent-bitget: #ef4444; /* Typography */ --ct-font-display: 'Syne', system-ui, sans-serif; --ct-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --ct-font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Spacing scale (4px grid) */ --ct-sp-2: 8px; --ct-sp-3: 12px; --ct-sp-4: 16px; --ct-sp-6: 24px; --ct-sp-8: 32px; /* Radii */ --ct-r-sm: 4px; --ct-r-md: 6px; --ct-r-lg: 10px; --ct-r-pill: 999px; /* Shadows */ --ct-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --ct-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); } /* Per-tool accent palettes. Add one class to to swap the accent variables without touching tool-local CSS. */ body.theme-blue { --ct-accent: #3b82f6; --ct-accent-hover: #2563eb; --ct-accent-soft: rgba(59, 130, 246, 0.15); --ct-border-accent: rgba(59, 130, 246, 0.2); } body.theme-red { --ct-accent: #ef4444; --ct-accent-hover: #dc2626; --ct-accent-soft: rgba(239, 68, 68, 0.15); --ct-border-accent: rgba(239, 68, 68, 0.2); } body.theme-amber { /* Bybit brand orange — darker on ct-accent-text so text reads on yellow. */ --ct-accent: #f7a600; --ct-accent-hover: #ea580c; --ct-accent-soft: rgba(247, 166, 0, 0.15); --ct-accent-text: #0a0a14; --ct-border-accent: rgba(247, 166, 0, 0.2); } body.theme-cyan { --ct-accent: #06b6d4; --ct-accent-hover: #0891b2; --ct-accent-soft: rgba(6, 182, 212, 0.15); --ct-border-accent: rgba(6, 182, 212, 0.2); } /* Honor the OS-level reduced-motion setting across every tool. Hub has animated grid + orbs + blinking dot, tools have hover transitions and toast slide-ins — all should defer to the user preference. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }