/* ============================================================================
   Prose Trade — design tokens
   Distilled from the product deck: near-black canvas, cool slate surfaces,
   one confident blue accent, a teal product mark, and a monospaced "terminal"
   voice for labels and numbers. No gradients-as-decoration, no glow soup.
   ========================================================================== */

:root {
  /* — Canvas & surfaces (cool, near-black, layered by elevation) — */
  --bg: #0a0e16;
  --bg-soft: #0d121c;
  --surface-1: #111824;
  --surface-2: #161f2e; /* matches the logo tile fill */
  --surface-3: #1b2636;
  --hairline: #232f42;
  --hairline-strong: #2a3647; /* matches the logo tile stroke */

  /* — Ink — */
  --ink: #f5f8fc;
  --ink-soft: #c3ccda;
  --ink-mute: #8a97aa;
  /* --ink-faint clears WCAG AA (4.5:1) for small text on every surface up to
     --surface-2; use it for low-emphasis text. --ink-decor is the old, dimmer
     value, reserved strictly for non-text decoration (fake URLs, separators). */
  --ink-faint: #97a3b6;
  --ink-decor: #5a6678;

  /* — Accents — */
  --accent: #5b9bd5;       /* the deck's blue */
  --accent-bright: #7db4e6;
  --accent-deep: #3f7cb8;
  --on-accent: #051321;    /* dark ink for text/icons sitting on --accent */
  --teal: #14b8a6;         /* the product mark accent */
  --teal-bright: #2dd4bf;

  /* — Semantic (market) — */
  --pos: #44c596;          /* up / positive P&L, from the app */
  --neg: #ff8c67;          /* down / negative, from the app */

  /* — Accent washes (used sparingly, never as page fill) — */
  --accent-wash: rgba(91, 155, 213, 0.12);
  --accent-line: rgba(91, 155, 213, 0.35);
  --teal-wash: rgba(20, 184, 166, 0.12);

  /* — Type — */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code",
    "Roboto Mono", "Liberation Mono", Menlo, Consolas, monospace;

  /* Fluid type scale (min @360px → max @1280px) */
  --step--1: clamp(0.78rem, 0.74rem + 0.18vw, 0.875rem);
  --step-0: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
  --step-1: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --step-2: clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
  --step-3: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  --step-4: clamp(2.6rem, 1.7rem + 4vw, 4.5rem);

  /* — Geometry — */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --maxw: 1180px;
  --maxw-prose: 64ch;

  /* — Elevation — */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.02) inset,
    0 18px 40px -24px rgba(0, 0, 0, 0.8);
  --shadow-screen: 0 40px 120px -40px rgba(0, 0, 0, 0.85),
    0 2px 0 rgba(255, 255, 255, 0.04) inset;

  /* — Motion — */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Respect users who don't want motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}