1@import "tailwindcss";23/*4 RareIndex design language (§160–§161): institutional market terminal × modern luxury house.5 Neutral base, accents reserved for gains / losses / index identity / rarity / alerts.6 Light and dark are first-class; `data-theme` on <html> overrides system preference.7*/89:root {10 --ri-bg: #fafaf9;11 --ri-bg-elevated: #ffffff;12 --ri-bg-sunken: #f4f4f3;13 --ri-bg-inset: #ececea;14 --ri-fg: #0b0b0c;15 --ri-fg-muted: #55555b;16 --ri-fg-subtle: #8a8a91;17 --ri-border: #e4e4e2;18 --ri-border-strong: #c9c9c5;19 --ri-accent: #0b0b0c;20 --ri-accent-fg: #ffffff;21 --ri-gain: #0f8a4a;22 --ri-gain-bg: #e6f5ec;23 --ri-loss: #c8262c;24 --ri-loss-bg: #fbe9ea;25 --ri-flat: #6b6b72;26 --ri-index: #1f3a8a;27 --ri-index-bg: #e8edfa;28 --ri-rarity: #7c3aed;29 --ri-rarity-bg: #f0e9fe;30 --ri-alert: #b45309;31 --ri-alert-bg: #fdf1e3;32 --ri-gold: #a16207;33 --ri-series-1: #2f5bd6;34 --ri-series-2: #c2410c;35 --ri-series-3: #0e9384;36 --ri-series-4: #7c3aed;37 --ri-series-muted: #b8b8bd;38 --ri-ring: rgba(11, 11, 12, 0.18);39 --ri-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.03);40 --ri-shadow-lg: 0 10px 30px -12px rgba(0, 0, 0, 0.18);41 --ri-radius: 6px;42 --ri-radius-sm: 4px;43 --ri-radius-lg: 10px;44 color-scheme: light;45}4647html[data-theme="dark"] {48 --ri-bg: #0b0c0e;49 --ri-bg-elevated: #121316;50 --ri-bg-sunken: #08090a;51 --ri-bg-inset: #1a1b1f;52 --ri-fg: #f2f2f0;53 --ri-fg-muted: #a8a8ad;54 --ri-fg-subtle: #6f6f76;55 --ri-border: #24252a;56 --ri-border-strong: #3a3b42;57 --ri-accent: #f2f2f0;58 --ri-accent-fg: #0b0c0e;59 --ri-gain: #34c47c;60 --ri-gain-bg: rgba(52, 196, 124, 0.12);61 --ri-loss: #ef5a5f;62 --ri-loss-bg: rgba(239, 90, 95, 0.12);63 --ri-flat: #8b8b93;64 --ri-index: #7c9cf5;65 --ri-index-bg: rgba(124, 156, 245, 0.12);66 --ri-rarity: #a78bfa;67 --ri-rarity-bg: rgba(167, 139, 250, 0.12);68 --ri-alert: #f0a34c;69 --ri-alert-bg: rgba(240, 163, 76, 0.12);70 --ri-gold: #d4a53a;71 --ri-series-1: #5b7fe6;72 --ri-series-2: #cf7a1f;73 --ri-series-3: #199c8a;74 --ri-series-4: #8f6fe8;75 --ri-series-muted: #4a4b52;76 --ri-ring: rgba(242, 242, 240, 0.22);77 --ri-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);78 --ri-shadow-lg: 0 14px 40px -14px rgba(0, 0, 0, 0.7);79 color-scheme: dark;80}8182@media (prefers-color-scheme: dark) {83 html:not([data-theme="light"]) {84 --ri-bg: #0b0c0e;85 --ri-bg-elevated: #121316;86 --ri-bg-sunken: #08090a;87 --ri-bg-inset: #1a1b1f;88 --ri-fg: #f2f2f0;89 --ri-fg-muted: #a8a8ad;90 --ri-fg-subtle: #6f6f76;91 --ri-border: #24252a;92 --ri-border-strong: #3a3b42;93 --ri-accent: #f2f2f0;94 --ri-accent-fg: #0b0c0e;95 --ri-gain: #34c47c;96 --ri-gain-bg: rgba(52, 196, 124, 0.12);97 --ri-loss: #ef5a5f;98 --ri-loss-bg: rgba(239, 90, 95, 0.12);99 --ri-flat: #8b8b93;100 --ri-index: #7c9cf5;101 --ri-index-bg: rgba(124, 156, 245, 0.12);102 --ri-rarity: #a78bfa;103 --ri-rarity-bg: rgba(167, 139, 250, 0.12);104 --ri-alert: #f0a34c;105 --ri-alert-bg: rgba(240, 163, 76, 0.12);106 --ri-gold: #d4a53a;107 --ri-series-1: #5b7fe6;108 --ri-series-2: #cf7a1f;109 --ri-series-3: #199c8a;110 --ri-series-4: #8f6fe8;111 --ri-series-muted: #4a4b52;112 --ri-ring: rgba(242, 242, 240, 0.22);113 --ri-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);114 --ri-shadow-lg: 0 14px 40px -14px rgba(0, 0, 0, 0.7);115 color-scheme: dark;116 }117}118119@theme inline {120 --color-bg: var(--ri-bg);121 --color-elevated: var(--ri-bg-elevated);122 --color-sunken: var(--ri-bg-sunken);123 --color-inset: var(--ri-bg-inset);124 --color-fg: var(--ri-fg);125 --color-muted: var(--ri-fg-muted);126 --color-subtle: var(--ri-fg-subtle);127 --color-border: var(--ri-border);128 --color-border-strong: var(--ri-border-strong);129 --color-accent: var(--ri-accent);130 --color-accent-fg: var(--ri-accent-fg);131 --color-gain: var(--ri-gain);132 --color-gain-bg: var(--ri-gain-bg);133 --color-loss: var(--ri-loss);134 --color-loss-bg: var(--ri-loss-bg);135 --color-flat: var(--ri-flat);136 --color-index: var(--ri-index);137 --color-index-bg: var(--ri-index-bg);138 --color-rarity: var(--ri-rarity);139 --color-rarity-bg: var(--ri-rarity-bg);140 --color-alert: var(--ri-alert);141 --color-alert-bg: var(--ri-alert-bg);142 --color-gold: var(--ri-gold);143 --color-series-1: var(--ri-series-1);144 --color-series-2: var(--ri-series-2);145 --color-series-3: var(--ri-series-3);146 --color-series-4: var(--ri-series-4);147 --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;148 --font-mono: var(--font-geist-mono), ui-monospace, "SF Mono", Menlo, monospace;149 --radius-sm: var(--ri-radius-sm);150 --radius-md: var(--ri-radius);151 --radius-lg: var(--ri-radius-lg);152 --shadow-card: var(--ri-shadow);153 --shadow-pop: var(--ri-shadow-lg);154}155156@layer base {157 html {158 height: 100%;159 -webkit-text-size-adjust: 100%;160 scroll-behavior: smooth;161 }162 body {163 min-height: 100%;164 background: var(--ri-bg);165 color: var(--ri-fg);166 font-family: var(--font-sans);167 font-feature-settings: "cv11", "ss01", "tnum";168 text-rendering: optimizeLegibility;169 -webkit-font-smoothing: antialiased;170 }171 ::selection {172 background: var(--ri-index-bg);173 }174 :focus-visible {175 outline: 2px solid var(--ri-ring);176 outline-offset: 2px;177 }178 input,179 select,180 textarea {181 font-size: 16px; /* prevents iOS zoom */182 }183 @media (min-width: 768px) {184 input,185 select,186 textarea {187 font-size: 14px;188 }189 }190 h1, h2, h3, h4 {191 letter-spacing: -0.015em;192 }193}194195@utility num {196 font-variant-numeric: tabular-nums lining-nums;197 font-feature-settings: "tnum", "lnum";198}199@utility mono-num {200 font-family: var(--font-mono);201 font-variant-numeric: tabular-nums;202}203@utility hairline {204 border-color: var(--ri-border);205}206@utility card {207 background: var(--ri-bg-elevated);208 border: 1px solid var(--ri-border);209 border-radius: var(--ri-radius);210 box-shadow: var(--ri-shadow);211}212@utility scrollbar-none {213 scrollbar-width: none;214 &::-webkit-scrollbar { display: none; }215}216@utility safe-bottom {217 padding-bottom: max(env(safe-area-inset-bottom), 0.75rem);218}219220@keyframes ri-tape {221 from { transform: translateX(0); }222 to { transform: translateX(-50%); }223}224.tape-track {225 animation: ri-tape 60s linear infinite;226}227.tape-track:hover { animation-play-state: paused; }228@media (prefers-reduced-motion: reduce) {229 .tape-track { animation: none; }230}231