/* ============================================================
   DRIPDAQ — terminal design system
   Token-driven so the Dripdaq engine can reskin per product.
   ============================================================ */

:root {
  /* canvas */
  --bg:        #07090b;
  --bg-1:      #0c1013;   /* raised panel */
  --bg-2:      #11161a;   /* row / card */
  --bg-hover:  #161d22;
  --line:      #1c252b;   /* hairlines */
  --line-soft: #141a1f;

  /* ink */
  --ink:       #eef3f5;
  --ink-dim:   #a4b3ba;
  --ink-faint: #7d8c94;

  /* market semantics */
  --up:        #16e08a;   /* terminal green */
  --up-bg:     color-mix(in oklab, var(--up) 14%, transparent);
  --down:      #ff4d57;   /* terminal red */
  --down-bg:   color-mix(in oklab, var(--down) 14%, transparent);
  --flat:      #8b9aa1;

  /* accent — the reskinnable knob. default = signal amber */
  --accent:    #ffb020;
  --accent-ink:#0a0a0a;

  /* heat scale (drip score color) */
  --heat-hot:  #16e08a;
  --heat-warm: #c9e85a;
  --heat-cool: #6fa0b0;

  /* type */
  --grotesk: "Archivo", -apple-system, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* density */
  --row-h: 44px;
  --pad: 20px;
  --radius: 4px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* subtle scanline / grid texture on the canvas */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: var(--scan, 0.35);
  mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 30%, transparent 80%);
}

::selection { background: var(--accent); color: var(--accent-ink); }

/* ---- typographic primitives ---- */
.display { font-family: var(--grotesk); font-weight: 800; letter-spacing: -0.02em; }
.display-x { font-family: var(--grotesk); font-weight: 800; font-stretch: 125%; letter-spacing: -0.01em; }
.mono { font-family: var(--mono); }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.up   { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--flat); }
.dim  { color: var(--ink-dim); }
.faint{ color: var(--ink-faint); }

.label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- chrome scaffolding ---- */
.app { position: relative; z-index: 1; min-height: 100vh; }

.panel {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; cursor: pointer; }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 0; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #2a363d; }

/* flash highlight when a live value ticks */
@keyframes tick-up   { 0% { background: var(--up-bg); }   100% { background: transparent; } }
@keyframes tick-down { 0% { background: var(--down-bg); } 100% { background: transparent; } }
.flash-up   { animation: tick-up 0.6s ease-out; }
.flash-down { animation: tick-down 0.6s ease-out; }

/* blink for the LIVE dot */
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--up); display: inline-block;
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--up) 60%, transparent);
  animation: blink 1.4s ease-in-out infinite;
}

/* market table row hover */
.mkt-row { transition: background .12s; }
.mkt-row:hover { background: var(--bg-hover); }
.mkt-row:hover .mono { color: #fff; }

/* hide scrollbars (mobile scroll regions) */
.no-sb { scrollbar-width: none; -ms-overflow-style: none; }
.no-sb::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* clickable product thumbnail */
.dq-thumb { transition: filter .12s, box-shadow .12s; }
.dq-thumb:hover { filter: brightness(1.18); box-shadow: 0 0 0 1px var(--accent); }

/* lightbox */
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lb-card { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }

/* auto-scroll long labels */
@keyframes scrolltext { 0%, 18% { transform: translateX(0); } 82%, 100% { transform: translateX(var(--st, 0)); } }

/* scrolling ticker tape */
@keyframes tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* logo candle rise-in */
@keyframes candle-rise {
  from { transform: scaleY(0.1); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .live-dot, .flash-up, .flash-down { animation: none !important; }
  [style*="tape"] { animation: none !important; }
}