/* biotech index tracker — design tokens.
   dark only, locked. plex sans for prose, plex mono for anything numeric.
   the legacy names (--bg, --surface, --border…) drive the app chrome; the
   ladder/ink/line tokens were added for the marketing layer and new ui. */

:root {
  /* app chrome (legacy names, keep) */
  --bg: #0b0d10;
  --surface: #10141a;
  --raised: #151b23;
  --hover: #1a222c;
  --border: #1f2730;
  --border-strong: #2b3642;
  --text: #dee5ec;
  --text-dim: #8a97a6;
  --text-faint: #5f6d7b;
  --accent: #e2a83d;
  --accent-dim: #8a6a2c;
  --up: #4cb782;
  --down: #e5534b;

  /* surface ladder, hairlines, ink */
  --bg-0: #0b0d10;
  --bg-1: #101318;
  --bg-2: #151920;
  --bg-3: #1b2028;
  --line-0: rgba(255, 255, 255, 0.06);
  --line-1: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.16);
  --ink-0: #f2f3f5;
  --ink-1: #c9cdd3;
  --ink-2: #8b919a;
  --ink-3: #5c626b;

  /* amber is punctuation, not fill */
  --amber: #e2a83d;
  --amber-soft: rgba(226, 168, 61, 0.14);
  --amber-line: rgba(226, 168, 61, 0.35);
  --amber-glow: rgba(226, 168, 61, 0.16);

  /* event type palette — stays readable on dark, green/red reserved for price direction */
  --ev-pdufa: #e2a83d;
  --ev-adcomm: #a78bdb;
  --ev-readout: #4db8c4;
  --ev-completion: #647e9c;
  --ev-results: #66a97f;
  --ev-approval: #43c078;
  --ev-crl: #e0564a;
  --ev-conference: #c77da6;
  --ev-other: #7a8794;

  --sans: var(--font-sans), 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono: var(--font-mono), 'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  /* layout */
  --container: 1120px;
  --container-wide: 1280px;
  --prose: 680px;
  --gutter: 24px;
  --nav-h: 60px;

  /* radii vary on purpose */
  --r-chip: 4px;
  --r-input: 8px;
  --r-card: 12px;
  --r-pill: 999px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --t-fast: 120ms;
  --t-std: 180ms;
  --t-slow: 280ms;
  --dur-reveal: 600ms;
  --reveal-y: 14px;
  --stagger: 60ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --reveal-y: 0px;
    --dur-reveal: 200ms;
    --stagger: 0ms;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 16px;
  }
}