/* ─────────────────────────────────────────────────────────────
   AST TRADES LAB — terminal / quant-desk design system.
   Ported from the Next app's app/globals.css. The @tailwind
   directives are gone (the Play CDN injects its own base layer);
   everything else is unchanged.

   lib/chart-theme.js reads these via getComputedStyle, so charts
   and UI always share one palette. Values are bare HSL triplets
   (no hsl() wrapper) because the Tailwind config wraps them.
   The app runs dark-first; :root holds a light fallback.
   ───────────────────────────────────────────────────────────── */
:root {
  --background: 60 6% 97%;
  --foreground: 220 30% 12%;
  --card: 0 0% 100%;
  --border: 220 13% 88%;
  --muted: 220 14% 94%;
  --muted-foreground: 220 9% 42%;

  --success: 150 68% 38%;
  --danger: 356 72% 50%;
  --warning: 36 92% 45%;
  --info: 194 82% 42%;
  --accent: 36 96% 50%;

  --chart-grid: 220 13% 88%;
  --chart-text: 220 9% 42%;
  --chart-axis: 215 14% 34%;

  --radius: 0.25rem;
}

.dark {
  /* Near-black cool base — the "screen" of the terminal. */
  --background: 220 24% 5%;
  --foreground: 210 16% 90%;
  --card: 220 20% 8%;
  --border: 220 15% 16%;
  --muted: 220 18% 12%;
  --muted-foreground: 218 10% 56%;

  /* P&L green / red stay reserved for money only.
     Amber (accent/warning) is the brand highlight — Bloomberg-desk cue. */
  --success: 152 64% 46%;
  --danger: 356 78% 62%;
  --warning: 36 96% 56%;
  --info: 190 82% 54%;
  --accent: 36 96% 56%;

  --chart-grid: 220 15% 15%;
  --chart-text: 218 10% 56%;
  --chart-axis: 215 12% 40%;
}

body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-feature-settings: "tnum" 1, "cv01" 1; /* tabular figures so P&L columns line up */
}

/* Faint engineering grid behind everything — the quant-desk backdrop.
   Fixed + pointer-events:none so it never touches layout or interaction. */
.dark body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(hsl(var(--border) / 0.35) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--border) / 0.35) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 0%, transparent 75%);
  opacity: 0.5;
}

/* App chrome sits above the grid. */
body > * {
  position: relative;
  z-index: 1;
}

/* Terminal cursor blink, used by the brand mark. */
@keyframes ast-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.ast-cursor {
  animation: ast-blink 1.1s steps(1) infinite;
}

/* Utility: monospaced "chip" of numeric/label text. */
.tnum {
  font-variant-numeric: tabular-nums;
}

/* Scrollable region with no visible scrollbar (used by the nav on narrow
   viewports — it can still scroll, it just doesn't draw a bar). */
.no-scrollbar {
  -ms-overflow-style: none;   /* IE / old Edge */
  scrollbar-width: none;      /* Firefox */
}
.no-scrollbar::-webkit-scrollbar {
  display: none;              /* Chromium / Safari */
}