/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HiFi Drops — Design Tokens & Base Styles
   Single source of truth. Tailwind config in base.html
   references these same variables via rgb(var() / alpha).
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 1. TOKENS ──────────────────────────────────────────── */

:root {
  /* Colors (stored as RGB channels so Tailwind opacity modifiers work)
     Usage in plain CSS: rgb(var(--color-gold))
     Usage with opacity: rgb(var(--color-gold) / 0.3) */
  --color-bg:          12  11  10;   /* #0C0B0A  page background    */
  --color-surface:     20  19  16;   /* #141310  raised surface      */
  --color-card:        28  26  23;   /* #1C1A17  card background     */
  --color-border:      46  43  38;   /* #2E2B26  subtle border       */
  --color-text:       230 224 212;   /* #E6E0D4  primary text        */
  --color-muted:      122 116 105;   /* #7A7469  secondary text      */
  --color-gold:       201 148  58;   /* #C9943A  brand accent        */
  --color-gold-light: 232 181  88;   /* #E8B558  hover / highlight   */
  --color-deal:       232  67  45;   /* #E8432D  price drop / alert  */
  --color-drop:        46 175 120;   /* #2EAF78  positive / ATL      */

  /* Typography */
  --font-display: "DM Serif Display", Georgia, serif;
  --font-sans:    Syne, system-ui, sans-serif;
  --font-mono:    "Space Mono", "Courier New", monospace;

  /* Layout */
  --max-width: 72rem;   /* Tailwind max-w-6xl */
  --radius:    0.375rem;

  /* Misc */
  --grain-opacity: 0.35;
}


/* Light theme overrides — swap only the tokens that change.
   Gold, deal red, and drop green stay identical in both themes. */
[data-theme="light"] {
  --color-bg:      242 238 230;   /* #F2EEE6  warm linen            */
  --color-surface: 250 247 241;   /* #FAF7F1  lighter linen         */
  --color-card:    255 252 246;   /* #FFFCF6  near-white warm       */
  --color-border:  210 204 192;   /* #D2CCC0  warm separator        */
  --color-text:     28  24  18;   /* #1C1812  deep warm black       */
  --color-muted:   128 118 104;   /* #807668  warm medium grey      */

  --grain-opacity: 0.12;          /* subtler grain on light bg      */
}


/* ── 2. BASE STYLES ─────────────────────────────────────── */

body {
  background-color: rgb(var(--color-bg));
  color:            rgb(var(--color-text));
  font-family:      var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* Mono elements default to the token */
code, kbd, samp, pre {
  font-family: var(--font-mono);
}

/* Links inherit color by default; individual components override */
a { color: inherit; text-decoration: none; }

/* Remove default focus ring; restored with gold below */
:focus { outline: none; }

:focus-visible {
  outline: 2px solid rgb(var(--color-gold));
  outline-offset: 2px;
}


/* ── 3. COMPONENTS ──────────────────────────────────────── */

/* Grain texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.06'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: var(--grain-opacity);
}

/* Custom scrollbar */
::-webkit-scrollbar          { width: 5px; }
::-webkit-scrollbar-track    { background: rgb(var(--color-bg)); }
::-webkit-scrollbar-thumb    { background: rgb(var(--color-border)); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--color-gold)); }

/* Nav link hover underline */
.nav-link {
  position: relative;
  padding-bottom: 2px;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: rgb(var(--color-gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

/* Deal badge glow */
.deal-badge {
  box-shadow: 0 0 10px rgb(var(--color-deal) / 0.35);
}

/* Deal card hover lift */
.deal-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.deal-card:hover {
  transform: translateY(-3px);
  border-color: rgb(var(--color-border) / 0.8);
  box-shadow: 0 12px 40px rgb(var(--color-bg) / 0.8);
}

/* Staggered fade-up animation */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fadeUp 0.55s ease forwards; }
.delay-100 { animation-delay: 0.10s; opacity: 0; }
.delay-200 { animation-delay: 0.20s; opacity: 0; }
.delay-300 { animation-delay: 0.30s; opacity: 0; }
.delay-400 { animation-delay: 0.40s; opacity: 0; }

/* Old price strikethrough */
.price-old {
  position: relative;
  display: inline-block;
}
.price-old::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgb(var(--color-deal));
  opacity: 0.7;
}

/* VU-meter gradient divider */
.vu-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent                    0%,
    rgb(var(--color-gold))        25%,
    rgb(var(--color-gold-light))  50%,
    rgb(var(--color-gold))        75%,
    transparent                  100%
  );
  opacity: 0.35;
}

/* Category pill active state */
.cat-pill.active {
  background:   rgb(var(--color-gold));
  border-color: rgb(var(--color-gold));
  color:        rgb(var(--color-bg));
  font-weight:  600;
}

/* Hide scrollbar on category strip */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Line-clamp (fallback for older browsers) */
.line-clamp-2,
.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }

/* Chart container */
#priceChart { min-height: 220px; }