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-ring: rgba(11, 11, 12, 0.18);34 --ri-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.03);35 --ri-shadow-lg: 0 10px 30px -12px rgba(0, 0, 0, 0.18);36 --ri-radius: 6px;37 --ri-radius-sm: 4px;38 --ri-radius-lg: 10px;39 color-scheme: light;40}4142html[data-theme="dark"] {43 --ri-bg: #0b0c0e;44 --ri-bg-elevated: #121316;45 --ri-bg-sunken: #08090a;46 --ri-bg-inset: #1a1b1f;47 --ri-fg: #f2f2f0;48 --ri-fg-muted: #a8a8ad;49 --ri-fg-subtle: #6f6f76;50 --ri-border: #24252a;51 --ri-border-strong: #3a3b42;52 --ri-accent: #f2f2f0;53 --ri-accent-fg: #0b0c0e;54 --ri-gain: #34c47c;55 --ri-gain-bg: rgba(52, 196, 124, 0.12);56 --ri-loss: #ef5a5f;57 --ri-loss-bg: rgba(239, 90, 95, 0.12);58 --ri-flat: #8b8b93;59 --ri-index: #7c9cf5;60 --ri-index-bg: rgba(124, 156, 245, 0.12);61 --ri-rarity: #a78bfa;62 --ri-rarity-bg: rgba(167, 139, 250, 0.12);63 --ri-alert: #f0a34c;64 --ri-alert-bg: rgba(240, 163, 76, 0.12);65 --ri-gold: #d4a53a;66 --ri-ring: rgba(242, 242, 240, 0.22);67 --ri-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);68 --ri-shadow-lg: 0 14px 40px -14px rgba(0, 0, 0, 0.7);69 color-scheme: dark;70}7172@media (prefers-color-scheme: dark) {73 html:not([data-theme="light"]) {74 --ri-bg: #0b0c0e;75 --ri-bg-elevated: #121316;76 --ri-bg-sunken: #08090a;77 --ri-bg-inset: #1a1b1f;78 --ri-fg: #f2f2f0;79 --ri-fg-muted: #a8a8ad;80 --ri-fg-subtle: #6f6f76;81 --ri-border: #24252a;82 --ri-border-strong: #3a3b42;83 --ri-accent: #f2f2f0;84 --ri-accent-fg: #0b0c0e;85 --ri-gain: #34c47c;86 --ri-gain-bg: rgba(52, 196, 124, 0.12);87 --ri-loss: #ef5a5f;88 --ri-loss-bg: rgba(239, 90, 95, 0.12);89 --ri-flat: #8b8b93;90 --ri-index: #7c9cf5;91 --ri-index-bg: rgba(124, 156, 245, 0.12);92 --ri-rarity: #a78bfa;93 --ri-rarity-bg: rgba(167, 139, 250, 0.12);94 --ri-alert: #f0a34c;95 --ri-alert-bg: rgba(240, 163, 76, 0.12);96 --ri-gold: #d4a53a;97 --ri-ring: rgba(242, 242, 240, 0.22);98 --ri-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);99 --ri-shadow-lg: 0 14px 40px -14px rgba(0, 0, 0, 0.7);100 color-scheme: dark;101 }102}103104@theme inline {105 --color-bg: var(--ri-bg);106 --color-elevated: var(--ri-bg-elevated);107 --color-sunken: var(--ri-bg-sunken);108 --color-inset: var(--ri-bg-inset);109 --color-fg: var(--ri-fg);110 --color-muted: var(--ri-fg-muted);111 --color-subtle: var(--ri-fg-subtle);112 --color-border: var(--ri-border);113 --color-border-strong: var(--ri-border-strong);114 --color-accent: var(--ri-accent);115 --color-accent-fg: var(--ri-accent-fg);116 --color-gain: var(--ri-gain);117 --color-gain-bg: var(--ri-gain-bg);118 --color-loss: var(--ri-loss);119 --color-loss-bg: var(--ri-loss-bg);120 --color-flat: var(--ri-flat);121 --color-index: var(--ri-index);122 --color-index-bg: var(--ri-index-bg);123 --color-rarity: var(--ri-rarity);124 --color-rarity-bg: var(--ri-rarity-bg);125 --color-alert: var(--ri-alert);126 --color-alert-bg: var(--ri-alert-bg);127 --color-gold: var(--ri-gold);128 --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;129 --font-mono: var(--font-geist-mono), ui-monospace, "SF Mono", Menlo, monospace;130 --radius-sm: var(--ri-radius-sm);131 --radius-md: var(--ri-radius);132 --radius-lg: var(--ri-radius-lg);133 --shadow-card: var(--ri-shadow);134 --shadow-pop: var(--ri-shadow-lg);135}136137@layer base {138 html {139 height: 100%;140 -webkit-text-size-adjust: 100%;141 scroll-behavior: smooth;142 }143 body {144 min-height: 100%;145 background: var(--ri-bg);146 color: var(--ri-fg);147 font-family: var(--font-sans);148 font-feature-settings: "cv11", "ss01", "tnum";149 text-rendering: optimizeLegibility;150 -webkit-font-smoothing: antialiased;151 }152 ::selection {153 background: var(--ri-index-bg);154 }155 :focus-visible {156 outline: 2px solid var(--ri-ring);157 outline-offset: 2px;158 }159 input,160 select,161 textarea {162 font-size: 16px; /* prevents iOS zoom */163 }164 @media (min-width: 768px) {165 input,166 select,167 textarea {168 font-size: 14px;169 }170 }171 h1, h2, h3, h4 {172 letter-spacing: -0.015em;173 }174}175176@utility num {177 font-variant-numeric: tabular-nums lining-nums;178 font-feature-settings: "tnum", "lnum";179}180@utility mono-num {181 font-family: var(--font-mono);182 font-variant-numeric: tabular-nums;183}184@utility hairline {185 border-color: var(--ri-border);186}187@utility card {188 background: var(--ri-bg-elevated);189 border: 1px solid var(--ri-border);190 border-radius: var(--ri-radius);191 box-shadow: var(--ri-shadow);192}193@utility scrollbar-none {194 scrollbar-width: none;195 &::-webkit-scrollbar { display: none; }196}197@utility safe-bottom {198 padding-bottom: max(env(safe-area-inset-bottom), 0.75rem);199}200201@keyframes ri-tape {202 from { transform: translateX(0); }203 to { transform: translateX(-50%); }204}205.tape-track {206 animation: ri-tape 60s linear infinite;207}208.tape-track:hover { animation-play-state: paused; }209@media (prefers-reduced-motion: reduce) {210 .tape-track { animation: none; }211}212