@import "tailwindcss"; /* Market Atlas design tokens. Institutional, dense but breathable. Two themes on . Light: cool paper canvas, near-black ink, atlas blue accent. Dark: graphite (never pure black), off-white ink. Semantic colours: positive / negative / neutral / stale / warning — always paired with text or an icon. */ :root, [data-theme="light"] { color-scheme: light; --canvas: #f5f6f4; --surface: #ffffff; --surface-2: #edeeeb; --surface-3: #e1e3de; --ink: #0f1217; --ink-2: #4a5062; --ink-3: #7b8294; --rule: rgba(15, 18, 23, 0.1); --rule-strong: rgba(15, 18, 23, 0.22); --accent: #1d4fd8; --accent-ink: #ffffff; --accent-soft: rgba(29, 79, 216, 0.1); --positive: #167a48; --positive-soft: rgba(22, 122, 72, 0.12); --negative: #c0323c; --negative-soft: rgba(192, 50, 60, 0.12); --warning: #b16d0b; --warning-soft: rgba(212, 130, 22, 0.14); --stale: #7b8294; --stale-soft: rgba(123, 130, 148, 0.14); --map-land: #e1e3de; --map-stroke: #ffffff; --brand-plate: #0f1217; --brand-ink: #f5f6f4; --series-1: #1d4fd8; --series-2: #c2560f; --series-3: #167a48; --series-4: #6d3fc7; --series-5: #0d7c86; --series-6: #b6337e; --series-7: #7b8294; --series-8: #c0323c; --header-h: 56px; --tabbar-h: 58px; --radius: 4px; --radius-lg: 8px; } [data-theme="dark"] { color-scheme: dark; --canvas: #0c0f14; --surface: #12161d; --surface-2: #191e27; --surface-3: #222834; --ink: #e8eaef; --ink-2: #a2a8b7; --ink-3: #6e7587; --rule: rgba(190, 200, 225, 0.11); --rule-strong: rgba(190, 200, 225, 0.26); --accent: #6b93ff; --accent-ink: #061024; --accent-soft: rgba(107, 147, 255, 0.14); --positive: #43c37d; --positive-soft: rgba(67, 195, 125, 0.14); --negative: #ff6b74; --negative-soft: rgba(255, 107, 116, 0.14); --warning: #f2b04a; --warning-soft: rgba(242, 176, 74, 0.14); --stale: #8b92a5; --stale-soft: rgba(139, 146, 165, 0.16); --map-land: #222834; --map-stroke: #0c0f14; --brand-plate: #e8eaef; --brand-ink: #0c0f14; --series-1: #6b93ff; --series-2: #ff9a4d; --series-3: #43c37d; --series-4: #b08cff; --series-5: #3fc3cf; --series-6: #ff7ab6; --series-7: #9aa3b8; --series-8: #ff6b74; } @theme inline { --color-canvas: var(--canvas); --color-surface: var(--surface); --color-surface-2: var(--surface-2); --color-surface-3: var(--surface-3); --color-ink: var(--ink); --color-ink-2: var(--ink-2); --color-ink-3: var(--ink-3); --color-rule: var(--rule); --color-rule-strong: var(--rule-strong); --color-accent: var(--accent); --color-accent-ink: var(--accent-ink); --color-accent-soft: var(--accent-soft); --color-positive: var(--positive); --color-positive-soft: var(--positive-soft); --color-negative: var(--negative); --color-negative-soft: var(--negative-soft); --color-warning: var(--warning); --color-warning-soft: var(--warning-soft); --color-stale: var(--stale); --color-stale-soft: var(--stale-soft); --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif; --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace; --radius-sm: var(--radius); --radius-md: var(--radius-lg); } html { background: var(--canvas); color: var(--ink); font-size: 15px; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); } body { font-family: var(--font-sans); font-feature-settings: "cv11", "ss01"; overflow-x: hidden; } .tnum { font-variant-numeric: tabular-nums; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* Surfaces & rules */ .panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); } .rule-b { border-bottom: 1px solid var(--rule); } .rule-t { border-top: 1px solid var(--rule); } /* Price flash — subtle, directional, 600 ms */ @keyframes flash-up { 0% { background-color: var(--positive-soft); } 100% { background-color: transparent; } } @keyframes flash-down { 0% { background-color: var(--negative-soft); } 100% { background-color: transparent; } } .flash-up { animation: flash-up 0.6s ease-out; } .flash-down { animation: flash-down 0.6s ease-out; } /* Live dot */ @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .live-dot { animation: pulse-dot 1.6s ease-in-out infinite; } /* Dense tables */ .table-dense { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.8125rem; } .table-dense th { position: sticky; top: 0; z-index: 1; background: var(--surface); color: var(--ink-3); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; text-align: left; padding: 0.5rem 0.625rem; border-bottom: 1px solid var(--rule-strong); white-space: nowrap; } .table-dense td { padding: 0.45rem 0.625rem; border-bottom: 1px solid var(--rule); white-space: nowrap; vertical-align: middle; } .table-dense tbody tr:hover { background: var(--surface-2); } .table-dense .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* Scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; } /* Prose (methodology, developers…) */ .prose-ma h2 { font-size: 1.125rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.5rem; } .prose-ma h3 { font-size: 0.95rem; font-weight: 600; margin-top: 1.25rem; margin-bottom: 0.35rem; } .prose-ma p, .prose-ma li { color: var(--ink-2); line-height: 1.6; margin-bottom: 0.6rem; } .prose-ma ul { list-style: disc; padding-left: 1.25rem; } .prose-ma code { font-family: var(--font-mono); font-size: 0.8em; background: var(--surface-2); padding: 0.1em 0.35em; border-radius: 3px; } .prose-ma pre { font-family: var(--font-mono); font-size: 0.78rem; background: var(--surface-2); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 0.85rem 1rem; overflow-x: auto; margin: 0.75rem 0 1rem; line-height: 1.5; } .prose-ma pre code { background: none; padding: 0; } .prose-ma table { width: 100%; font-size: 0.85rem; margin: 0.5rem 0 1rem; display: block; overflow-x: auto; } .prose-ma table code { white-space: nowrap; } .prose-ma td code { white-space: normal; word-break: break-word; } .prose-ma th, .prose-ma td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--rule); vertical-align: top; } @media (prefers-reduced-motion: reduce) { .flash-up, .flash-down, .live-dot { animation: none; } }