@import url("https://fonts.googleapis.com/css2?family=Jersey+25&display=swap"); /* * Theme tokens. * `data-theme` is set on by the inline init script before paint. * Dark is the legacy default; light is the warm/cream override. * * `--rgb-*` are space-separated channels for Tailwind opacity utilities * (`rgb(var(--rgb-primary) / )`). * `--color-*` are direct CSS color strings for inline styles. * Keep the two in sync. */ :root, :root[data-theme="dark"] { --rgb-background: 11 19 38; --rgb-on-background: 218 226 253; --rgb-surface: 11 19 38; --rgb-on-surface: 218 226 253; --rgb-on-surface-variant: 199 196 215; --rgb-surface-dim: 11 19 38; --rgb-surface-bright: 49 57 77; --rgb-surface-container-lowest: 6 14 32; --rgb-surface-container-low: 19 27 46; --rgb-surface-container: 23 31 51; --rgb-surface-container-high: 34 42 61; --rgb-surface-container-highest: 45 52 73; --rgb-surface-variant: 45 52 73; --rgb-surface-tint: 192 193 255; --rgb-primary: 192 193 255; --rgb-on-primary: 16 0 169; --rgb-primary-container: 128 131 255; --rgb-on-primary-container: 13 0 150; --rgb-primary-fixed: 225 224 255; --rgb-primary-fixed-dim: 192 193 255; --rgb-on-primary-fixed: 7 0 108; --rgb-on-primary-fixed-variant: 47 46 190; --rgb-inverse-primary: 73 75 214; --rgb-secondary: 173 198 255; --rgb-on-secondary: 0 46 106; --rgb-secondary-container: 5 102 217; --rgb-on-secondary-container: 230 236 255; --rgb-secondary-fixed: 216 226 255; --rgb-secondary-fixed-dim: 173 198 255; --rgb-on-secondary-fixed: 0 26 66; --rgb-on-secondary-fixed-variant: 0 67 149; --rgb-tertiary: 74 225 118; --rgb-on-tertiary: 0 57 21; --rgb-tertiary-container: 0 167 75; --rgb-on-tertiary-container: 0 49 17; --rgb-tertiary-fixed: 107 255 143; --rgb-tertiary-fixed-dim: 74 225 118; --rgb-on-tertiary-fixed: 0 33 9; --rgb-on-tertiary-fixed-variant: 0 83 33; --rgb-error: 255 180 171; --rgb-on-error: 105 0 5; --rgb-error-container: 147 0 10; --rgb-on-error-container: 255 218 214; --rgb-outline: 144 143 160; --rgb-outline-variant: 70 69 84; --rgb-inverse-surface: 218 226 253; --rgb-inverse-on-surface: 40 48 68; --rgb-warning: 255 215 112; --color-background: rgb(var(--rgb-background)); --color-on-background: rgb(var(--rgb-on-background)); --color-surface: rgb(var(--rgb-surface)); --color-on-surface: rgb(var(--rgb-on-surface)); --color-on-surface-variant: rgb(var(--rgb-on-surface-variant)); --color-surface-dim: rgb(var(--rgb-surface-dim)); --color-surface-bright: rgb(var(--rgb-surface-bright)); --color-surface-container-lowest: rgb(var(--rgb-surface-container-lowest)); --color-surface-container-low: rgb(var(--rgb-surface-container-low)); --color-surface-container: rgb(var(--rgb-surface-container)); --color-surface-container-high: rgb(var(--rgb-surface-container-high)); --color-surface-container-highest: rgb(var(--rgb-surface-container-highest)); --color-surface-variant: rgb(var(--rgb-surface-variant)); --color-surface-tint: rgb(var(--rgb-surface-tint)); --color-primary: rgb(var(--rgb-primary)); --color-on-primary: rgb(var(--rgb-on-primary)); --color-primary-container: rgb(var(--rgb-primary-container)); --color-on-primary-container: rgb(var(--rgb-on-primary-container)); --color-primary-fixed: rgb(var(--rgb-primary-fixed)); --color-primary-fixed-dim: rgb(var(--rgb-primary-fixed-dim)); --color-on-primary-fixed: rgb(var(--rgb-on-primary-fixed)); --color-on-primary-fixed-variant: rgb(var(--rgb-on-primary-fixed-variant)); --color-inverse-primary: rgb(var(--rgb-inverse-primary)); --color-secondary: rgb(var(--rgb-secondary)); --color-on-secondary: rgb(var(--rgb-on-secondary)); --color-secondary-container: rgb(var(--rgb-secondary-container)); --color-on-secondary-container: rgb(var(--rgb-on-secondary-container)); --color-tertiary: rgb(var(--rgb-tertiary)); --color-on-tertiary: rgb(var(--rgb-on-tertiary)); --color-tertiary-container: rgb(var(--rgb-tertiary-container)); --color-on-tertiary-container: rgb(var(--rgb-on-tertiary-container)); --color-error: rgb(var(--rgb-error)); --color-on-error: rgb(var(--rgb-on-error)); --color-error-container: rgb(var(--rgb-error-container)); --color-on-error-container: rgb(var(--rgb-on-error-container)); --color-outline: rgb(var(--rgb-outline)); --color-outline-variant: rgb(var(--rgb-outline-variant)); --color-inverse-surface: rgb(var(--rgb-inverse-surface)); --color-inverse-on-surface: rgb(var(--rgb-inverse-on-surface)); --tone-positive: #4ae176; --tone-success: #4ae176; --tone-up: #22c55e; --tone-warning: #ffd770; --tone-danger: #ffb4ab; --tone-down: #dc2626; --tone-info: #adc6ff; --tone-neutral: #908fa0; --bg-tone-positive: rgba(74, 225, 118, 0.12); --bg-tone-success: rgba(74, 225, 118, 0.12); --bg-tone-up: rgba(34, 197, 94, 0.16); --bg-tone-warning: rgba(255, 215, 112, 0.12); --bg-tone-danger: rgba(255, 180, 171, 0.12); --bg-tone-down: rgba(220, 38, 38, 0.18); --bg-tone-info: rgba(173, 198, 255, 0.12); --bg-tone-neutral: rgba(144, 143, 160, 0.10); --simple-report-heading: #dae2fd; --simple-report-body: #c7c4d7; --simple-report-link: #c0c1ff; --simple-report-quote-border: rgba(192, 193, 255, 0.42); --simple-report-quote-bg: rgba(255, 255, 255, 0.06); --simple-report-code-bg: rgba(255, 255, 255, 0.09); --simple-report-pre-bg: rgba(6, 14, 32, 0.92); --simple-report-hr: rgba(70, 69, 84, 0.55); --simple-report-table-border: rgba(70, 69, 84, 0.55); --simple-report-table-th-bg: rgba(255, 255, 255, 0.06); --tradingview-color-theme: dark; } :root[data-theme="light"] { --rgb-background: 254 253 248; --rgb-on-background: 29 28 32; --rgb-surface: 255 255 255; --rgb-on-surface: 29 28 32; --rgb-on-surface-variant: 74 72 96; --rgb-surface-dim: 245 241 224; --rgb-surface-bright: 255 255 255; --rgb-surface-container-lowest: 255 255 255; --rgb-surface-container-low: 251 248 235; --rgb-surface-container: 248 244 227; --rgb-surface-container-high: 241 236 213; --rgb-surface-container-highest: 235 229 200; --rgb-surface-variant: 238 233 211; --rgb-surface-tint: 73 75 214; --rgb-primary: 73 75 214; --rgb-on-primary: 255 255 255; --rgb-primary-container: 225 224 255; --rgb-on-primary-container: 13 0 150; --rgb-primary-fixed: 73 75 214; --rgb-primary-fixed-dim: 47 46 190; --rgb-on-primary-fixed: 7 0 108; --rgb-on-primary-fixed-variant: 47 46 190; --rgb-inverse-primary: 192 193 255; --rgb-secondary: 63 95 185; --rgb-on-secondary: 255 255 255; --rgb-secondary-container: 221 230 255; --rgb-on-secondary-container: 0 23 77; --rgb-tertiary: 29 141 58; --rgb-on-tertiary: 255 255 255; --rgb-tertiary-container: 198 255 209; --rgb-on-tertiary-container: 0 33 13; --rgb-error: 186 26 26; --rgb-on-error: 255 255 255; --rgb-error-container: 255 218 214; --rgb-on-error-container: 65 0 2; --rgb-outline: 118 117 132; --rgb-outline-variant: 214 210 189; --rgb-inverse-surface: 47 49 66; --rgb-inverse-on-surface: 240 238 244; --rgb-warning: 161 98 7; --tone-positive: #16803c; --tone-success: #16803c; --tone-up: #15803d; --tone-warning: #a16207; --tone-danger: #b91c1c; --tone-down: #b91c1c; --tone-info: #3f5fb9; --tone-neutral: #767584; --bg-tone-positive: rgba(22, 128, 60, 0.10); --bg-tone-success: rgba(22, 128, 60, 0.10); --bg-tone-up: rgba(21, 128, 61, 0.12); --bg-tone-warning: rgba(161, 98, 7, 0.12); --bg-tone-danger: rgba(185, 28, 28, 0.10); --bg-tone-down: rgba(185, 28, 28, 0.10); --bg-tone-info: rgba(63, 95, 185, 0.10); --bg-tone-neutral: rgba(118, 117, 132, 0.10); --simple-report-heading: #1d1c20; --simple-report-body: #3d3b4f; --simple-report-link: #494bd6; --simple-report-quote-border: rgba(73, 75, 214, 0.46); --simple-report-quote-bg: rgba(0, 0, 0, 0.045); --simple-report-code-bg: rgba(0, 0, 0, 0.075); --simple-report-pre-bg: rgba(248, 244, 227, 0.95); --simple-report-hr: rgba(118, 117, 132, 0.35); --simple-report-table-border: rgba(118, 117, 132, 0.35); --simple-report-table-th-bg: rgba(0, 0, 0, 0.04); --tradingview-color-theme: light; } html { scrollbar-gutter: stable; background-color: rgb(var(--rgb-background)); color: rgb(var(--rgb-on-background)); } .brand-logo { display: inline-flex; flex-direction: column; align-items: flex-start; font-family: "Jersey 25", "JetBrains Mono", monospace !important; font-weight: 400; letter-spacing: 0 !important; line-height: 0.78; text-transform: none; } .brand-logo-main { display: block; font-size: 2.4em; line-height: 0.72; } .brand-logo-sub { display: block; margin-top: 0.08em; padding-left: 0.08em; font-size: 1.4em; line-height: 0.9; opacity: 0.86; } .trade-segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; padding: 0.25rem; border: 1px solid rgb(var(--rgb-outline-variant) / 0.4); border-radius: 0.875rem; background: rgb(var(--rgb-surface-container-low)); } .trade-segmented__button { min-height: 2.5rem; border: 0; border-radius: 0.625rem; background: transparent; color: rgb(var(--rgb-on-surface-variant)); font-size: 0.75rem; font-weight: 800; cursor: pointer; transition: background 120ms ease, color 120ms ease; } .trade-segmented__button.is-active { background: rgb(var(--rgb-primary-container) / 0.35); color: rgb(var(--rgb-on-primary-container)); } .trade-segmented__button--buy.is-active { background: var(--bg-tone-positive); color: var(--tone-positive); } .trade-segmented__button--sell.is-active { background: var(--bg-tone-danger); color: var(--tone-danger); } .sortable-header { display: inline-flex; width: 100%; align-items: center; gap: 0.3rem; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-align: inherit; cursor: pointer; } .sort-arrow::after { content: ""; color: rgb(var(--rgb-primary)); } .sortable-header.is-active .sort-arrow::after { content: "↓"; } .sortable-header.is-active[data-sort-direction="asc"] .sort-arrow::after { content: "↑"; } /* Theme toggle button icons — show CURRENT mode (not the next one) */ .theme-toggle__sun, .theme-toggle__moon, .theme-toggle__label-light, .theme-toggle__label-dark { display: none; } :root[data-theme="dark"] .theme-toggle__moon { display: inline-block; } :root[data-theme="light"] .theme-toggle__sun { display: inline-block; } @media (min-width: 640px) { :root[data-theme="dark"] .theme-toggle__label-dark { display: inline; } :root[data-theme="light"] .theme-toggle__label-light { display: inline; } }