/* PokeDAQ — Colors and Type
 * Source of truth tokens mirrored from app/globals.css and tailwind.config.ts
 * in the PokeDAQ codebase (nerkza/PokeDAQ @ main).
 */

/* ---- Fonts (Google Fonts CDN — substitutes for next/font/google loaders) ---- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  color-scheme: dark;

  /* ── Surfaces ───────────────────────────────── */
  --bg:            #05070c; /* page background */
  --bg-raised:    #0a0e17; /* tickertape, status bar, input bg */
  --panel:        #0d131e; /* panel background */
  --panel-strong: #121a27; /* panel row hover, inner cards */
  --line:         #1d2738; /* primary border */
  --line-strong:  #2a3648; /* hover border, dividers on focus */

  /* ── Foreground ─────────────────────────────── */
  --text:      #eef3fb;
  --muted:     #95a4bd;
  --muted-dim: #6a7890;

  /* ── Sentiment ──────────────────────────────── */
  --gain:    #3cdd84;
  --gain-bg: rgba(60, 221, 132, 0.14);
  --loss:    #ff6c7e;
  --loss-bg: rgba(255, 108, 126, 0.14);
  --signal:    #ffc04d;               /* brand amber */
  --accent:    #5dd1ee;               /* brand cyan */
  --accent-bg: rgba(93, 209, 238, 0.14);

  /* ── Type families ──────────────────────────── */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  /* ── Type scale ─────────────────────────────── */
  --fs-2xs: 0.78rem;  /* 12.48px — metric labels, ticker text */
  --fs-xs:  0.86rem;  /* 13.76px — table body, secondary text */
  --fs-sm:  0.94rem;  /* 15.04px — card names, primary row labels */
  --fs-base:1.00rem;  /* 16px    — section headings, panel titles */
  --fs-lg:  1.125rem;
  --fs-xl:  1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;
  --fs-4xl: 2.25rem;  /* hero numbers */

  --lh-2xs: 1.1rem;
  --lh-xs:  1.2rem;
  --lh-sm:  1.35rem;
  --lh-base:1.5rem;

  /* ── Spacing (Tailwind compatible) ──────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* ── Brutalist rules ────────────────────────── */
  --radius: 0;          /* no border-radius anywhere */
  --shadow: none;       /* no decorative shadow */
}

/* ── Base ─────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  background-image:
    linear-gradient(to right,  rgba(29,39,56,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(29,39,56,0.08) 1px, transparent 1px),
    radial-gradient(circle at 20% -10%, rgba(66,197,229,0.04), transparent 40%),
    radial-gradient(circle at 90% 110%, rgba(255,176,32,0.03), transparent 45%);
  background-size: 96px 96px, 96px 96px, auto, auto;
  background-attachment: fixed;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #04090f; }

/* ── Semantic utilities ───────────────────────── */
.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
}
.metric-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Motion ───────────────────────────────────── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1;    transform: scale(1);   }
  50%      { opacity: 0.35; transform: scale(0.6); }
}
.live-dot { animation: pulse-dot 1.6s ease-in-out infinite; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 90s linear infinite; will-change: transform; }

/* ── Scrollbar ────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }