@import "tailwindcss";

/*
  RareIndex design language (§160–§161): institutional market terminal × modern luxury house.
  Neutral base, accents reserved for gains / losses / index identity / rarity / alerts.
  Light and dark are first-class; `data-theme` on <html> overrides system preference.
*/

:root {
  --ri-bg: #fafaf9;
  --ri-bg-elevated: #ffffff;
  --ri-bg-sunken: #f4f4f3;
  --ri-bg-inset: #ececea;
  --ri-fg: #0b0b0c;
  --ri-fg-muted: #55555b;
  --ri-fg-subtle: #8a8a91;
  --ri-border: #e4e4e2;
  --ri-border-strong: #c9c9c5;
  --ri-accent: #0b0b0c;
  --ri-accent-fg: #ffffff;
  --ri-gain: #0f8a4a;
  --ri-gain-bg: #e6f5ec;
  --ri-loss: #c8262c;
  --ri-loss-bg: #fbe9ea;
  --ri-flat: #6b6b72;
  --ri-index: #1f3a8a;
  --ri-index-bg: #e8edfa;
  --ri-rarity: #7c3aed;
  --ri-rarity-bg: #f0e9fe;
  --ri-alert: #b45309;
  --ri-alert-bg: #fdf1e3;
  --ri-gold: #a16207;
  --ri-series-1: #2f5bd6;
  --ri-series-2: #c2410c;
  --ri-series-3: #0e9384;
  --ri-series-4: #7c3aed;
  --ri-series-muted: #b8b8bd;
  --ri-ring: rgba(11, 11, 12, 0.18);
  --ri-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.03);
  --ri-shadow-lg: 0 10px 30px -12px rgba(0, 0, 0, 0.18);
  --ri-radius: 6px;
  --ri-radius-sm: 4px;
  --ri-radius-lg: 10px;
  color-scheme: light;
}

html[data-theme="dark"] {
  --ri-bg: #0b0c0e;
  --ri-bg-elevated: #121316;
  --ri-bg-sunken: #08090a;
  --ri-bg-inset: #1a1b1f;
  --ri-fg: #f2f2f0;
  --ri-fg-muted: #a8a8ad;
  --ri-fg-subtle: #6f6f76;
  --ri-border: #24252a;
  --ri-border-strong: #3a3b42;
  --ri-accent: #f2f2f0;
  --ri-accent-fg: #0b0c0e;
  --ri-gain: #34c47c;
  --ri-gain-bg: rgba(52, 196, 124, 0.12);
  --ri-loss: #ef5a5f;
  --ri-loss-bg: rgba(239, 90, 95, 0.12);
  --ri-flat: #8b8b93;
  --ri-index: #7c9cf5;
  --ri-index-bg: rgba(124, 156, 245, 0.12);
  --ri-rarity: #a78bfa;
  --ri-rarity-bg: rgba(167, 139, 250, 0.12);
  --ri-alert: #f0a34c;
  --ri-alert-bg: rgba(240, 163, 76, 0.12);
  --ri-gold: #d4a53a;
  --ri-series-1: #5b7fe6;
  --ri-series-2: #cf7a1f;
  --ri-series-3: #199c8a;
  --ri-series-4: #8f6fe8;
  --ri-series-muted: #4a4b52;
  --ri-ring: rgba(242, 242, 240, 0.22);
  --ri-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ri-shadow-lg: 0 14px 40px -14px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --ri-bg: #0b0c0e;
    --ri-bg-elevated: #121316;
    --ri-bg-sunken: #08090a;
    --ri-bg-inset: #1a1b1f;
    --ri-fg: #f2f2f0;
    --ri-fg-muted: #a8a8ad;
    --ri-fg-subtle: #6f6f76;
    --ri-border: #24252a;
    --ri-border-strong: #3a3b42;
    --ri-accent: #f2f2f0;
    --ri-accent-fg: #0b0c0e;
    --ri-gain: #34c47c;
    --ri-gain-bg: rgba(52, 196, 124, 0.12);
    --ri-loss: #ef5a5f;
    --ri-loss-bg: rgba(239, 90, 95, 0.12);
    --ri-flat: #8b8b93;
    --ri-index: #7c9cf5;
    --ri-index-bg: rgba(124, 156, 245, 0.12);
    --ri-rarity: #a78bfa;
    --ri-rarity-bg: rgba(167, 139, 250, 0.12);
    --ri-alert: #f0a34c;
    --ri-alert-bg: rgba(240, 163, 76, 0.12);
    --ri-gold: #d4a53a;
    --ri-series-1: #5b7fe6;
    --ri-series-2: #cf7a1f;
    --ri-series-3: #199c8a;
    --ri-series-4: #8f6fe8;
    --ri-series-muted: #4a4b52;
    --ri-ring: rgba(242, 242, 240, 0.22);
    --ri-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ri-shadow-lg: 0 14px 40px -14px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}

@theme inline {
  --color-bg: var(--ri-bg);
  --color-elevated: var(--ri-bg-elevated);
  --color-sunken: var(--ri-bg-sunken);
  --color-inset: var(--ri-bg-inset);
  --color-fg: var(--ri-fg);
  --color-muted: var(--ri-fg-muted);
  --color-subtle: var(--ri-fg-subtle);
  --color-border: var(--ri-border);
  --color-border-strong: var(--ri-border-strong);
  --color-accent: var(--ri-accent);
  --color-accent-fg: var(--ri-accent-fg);
  --color-gain: var(--ri-gain);
  --color-gain-bg: var(--ri-gain-bg);
  --color-loss: var(--ri-loss);
  --color-loss-bg: var(--ri-loss-bg);
  --color-flat: var(--ri-flat);
  --color-index: var(--ri-index);
  --color-index-bg: var(--ri-index-bg);
  --color-rarity: var(--ri-rarity);
  --color-rarity-bg: var(--ri-rarity-bg);
  --color-alert: var(--ri-alert);
  --color-alert-bg: var(--ri-alert-bg);
  --color-gold: var(--ri-gold);
  --color-series-1: var(--ri-series-1);
  --color-series-2: var(--ri-series-2);
  --color-series-3: var(--ri-series-3);
  --color-series-4: var(--ri-series-4);
  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: var(--font-geist-mono), ui-monospace, "SF Mono", Menlo, monospace;
  --radius-sm: var(--ri-radius-sm);
  --radius-md: var(--ri-radius);
  --radius-lg: var(--ri-radius-lg);
  --shadow-card: var(--ri-shadow);
  --shadow-pop: var(--ri-shadow-lg);
}

@layer base {
  html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }
  body {
    min-height: 100%;
    background: var(--ri-bg);
    color: var(--ri-fg);
    font-family: var(--font-sans);
    font-feature-settings: "cv11", "ss01", "tnum";
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  ::selection {
    background: var(--ri-index-bg);
  }
  :focus-visible {
    outline: 2px solid var(--ri-ring);
    outline-offset: 2px;
  }
  input,
  select,
  textarea {
    font-size: 16px; /* prevents iOS zoom */
  }
  @media (min-width: 768px) {
    input,
    select,
    textarea {
      font-size: 14px;
    }
  }
  h1, h2, h3, h4 {
    letter-spacing: -0.015em;
  }
}

@utility num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum", "lnum";
}
@utility mono-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
@utility hairline {
  border-color: var(--ri-border);
}
@utility card {
  background: var(--ri-bg-elevated);
  border: 1px solid var(--ri-border);
  border-radius: var(--ri-radius);
  box-shadow: var(--ri-shadow);
}
@utility scrollbar-none {
  scrollbar-width: none;
  &::-webkit-scrollbar { display: none; }
}
@utility safe-bottom {
  padding-bottom: max(env(safe-area-inset-bottom), 0.75rem);
}

@keyframes ri-tape {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.tape-track {
  animation: ri-tape 60s linear infinite;
}
.tape-track:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .tape-track { animation: none; }
}