/* Pump Monitor — design tokens. Drop-in for public/index.html. Theme via , density via data-density="compact|comfortable". */ :root, [data-theme="dark"] { /* surfaces */ --bg-0: #0e0f12; /* page */ --bg-1: #14161b; /* panel */ --bg-2: #1a1d24; /* raised, inputs, table header */ --bg-3: #21252e; /* hover / selected row / toast */ --line: #262a33; --line-strong: #333945; /* text */ --fg-0: #e6e9ef; --fg-1: #9aa3b2; /* secondary */ --fg-2: #626b7a; /* tertiary, labels, timestamps */ /* semantic hues (fixed meaning) */ --up: #2ebd85; /* bullish · buy · hit · long · success */ --down: #f6465d; /* bearish · sell · stop · short · error */ --gold: #f0b90b; /* golden fib · attention · near · brand · primary action */ --info: #4a8cff; /* neutral info · links · focus · entry · current price · AI */ --up-soft: rgba(46,189,133,.14); --down-soft: rgba(246,70,93,.14); --gold-soft: rgba(240,185,11,.14); --info-soft: rgba(74,140,255,.14); --up-line: rgba(46,189,133,.5); /* outlined badge borders */ --down-line: rgba(246,70,93,.5); --gold-line: rgba(240,185,11,.5); --info-line: rgba(74,140,255,.5); --on-gold: #14161b; /* text on gold buttons */ --on-info: #ffffff; /* fib rung colours */ --fib-236: var(--fg-1); --fib-382: var(--info); --fib-500: var(--fg-0); --fib-618: var(--gold); --fib-786: var(--down); --fib-hit: var(--up); /* plan level type colours */ --lvl-entry: var(--info); --lvl-tp: var(--up); --lvl-sl: var(--down); --lvl-invalidation: var(--down); /* dashed line */ --lvl-breakout: var(--gold); --lvl-breakdown: var(--down); --lvl-custom: var(--fg-1); /* elevation */ --e1: 0 8px 24px rgba(0,0,0,.45); /* drawer, popover */ --e2: 0 16px 40px rgba(0,0,0,.6); /* toast, dialog */ /* chart grid */ --chart-grid: #14161b; } [data-theme="light"] { --bg-0: #f4f5f7; --bg-1: #ffffff; --bg-2: #eef0f4; --bg-3: #e4e8ee; --line: #dfe3ea; --line-strong: #c6ccd6; --fg-0: #14161b; --fg-1: #5b6470; --fg-2: #8a93a3; --up: #1a9e6d; --down: #dc3545; --gold: #c58f00; --info: #2f6fe0; --up-soft: rgba(26,158,109,.12); --down-soft: rgba(220,53,69,.12); --gold-soft: rgba(197,143,0,.14); --info-soft: rgba(47,111,224,.12); --up-line: rgba(26,158,109,.5); --down-line: rgba(220,53,69,.5); --gold-line: rgba(197,143,0,.5); --info-line: rgba(47,111,224,.5); --on-gold: #ffffff; --e1: 0 8px 24px rgba(20,22,27,.12); --e2: 0 16px 40px rgba(20,22,27,.18); --chart-grid: #eef0f4; } :root { /* type */ --font-ui: "Instrument Sans", system-ui, -apple-system, sans-serif; --font-num: "JetBrains Mono", ui-monospace, Menlo, monospace; --t-label: 600 11px/14px var(--font-ui); /* uppercase, letter-spacing .8px */ --t-compact: 400 12px/16px var(--font-ui); --t-body: 400 13px/19px var(--font-ui); --t-title: 600 15px/20px var(--font-ui); --t-display: 600 20px/24px var(--font-num); --t-hero: 600 32px/32px var(--font-num); --tracking-label: .8px; /* space */ --s-1: 2px; --s-2: 4px; --s-3: 8px; --s-4: 12px; --s-5: 16px; --s-6: 24px; --s-7: 32px; /* radius */ --r-chip: 3px; --r-ctrl: 6px; --r-panel: 10px; --r-pill: 999px; /* motion */ --dur-tick: 900ms; --dur-flash: 1200ms; --dur-drawer: 220ms; --dur-drawer-out: 160ms; --dur-live: 2s; --ease-drawer: cubic-bezier(.2,.8,.2,1); /* density (defaults = comfortable) */ --row-h: 40px; --panel-pad: 16px; --cell-font: 13px; --header-h: 48px; } [data-density="compact"] { --row-h: 30px; --panel-pad: 12px; --cell-font: 12px; --header-h: 44px; } /* resets */ html { background: var(--bg-0); color: var(--fg-0); font: var(--t-body); } * { box-sizing: border-box; } .num, [data-num] { font-family: var(--font-num); font-variant-numeric: tabular-nums; } a { color: var(--info); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--info-line); outline-offset: 1px; } @keyframes tick-up { from { background: rgba(46,189,133,.35) } to { background: transparent } } @keyframes tick-down { from { background: rgba(246,70,93,.35) } to { background: transparent } } @keyframes row-flash { from { background: var(--up-soft) } to { background: transparent } } @keyframes live-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } } @keyframes shimmer { from { background-position: -400px 0 } to { background-position: 400px 0 } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; } }