/* Design tokens — Basket Trading */

:root {
  /* Light surfaces (default) */
  --bg: #ffffff;
  --bg-soft: #f4f4f4;
  --fill: rgba(13, 13, 13, 0.04);
  --fill-2: rgba(13, 13, 13, 0.07);
  --card: #ffffff;

  /* Hairlines — only where a contour is wanted */
  --line: rgba(13, 13, 13, 0.09);
  --line-strong: rgba(13, 13, 13, 0.18);

  /* Ink */
  --ink: #0d0d0d;
  --muted: #626262;
  --faint: #949494;

  /* Accent */
  --accent: #0000ff;
  --accent-hover: #0000cc;
  --accent-soft: rgba(0, 0, 255, 0.08);
  --accent-ink: #0000ff;

  /* Channels */
  --wa: #25d366;
  --wa-hover: #1eb257;
  --tg: #229ed9;
  --tg-hover: #1b86ba;
  --yt: #ff0000;
  --yt-hover: #d90000;

  /* Popups — always dark glass with a soft contour */
  --pop-bg: rgba(26, 26, 26, 0.6);
  --pop-ring: rgba(255, 255, 255, 0.13);
  --pop-ink: #f7f7f7;
  --pop-muted: rgba(247, 247, 247, 0.62);
  --pop-fill: rgba(255, 255, 255, 0.06);
  --pop-fill-2: rgba(255, 255, 255, 0.11);

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Layout */
  --nav-h: 68px;
  --max-w: 1320px;
  --pad-x: 20px;

  /* Type */
  --t-display: clamp(2.7rem, 7vw, 4.9rem);
  --t-h1: clamp(2.1rem, 5.4vw, 3.4rem);
  --t-h2: clamp(1.9rem, 4vw, 2.9rem);
  --t-h3: clamp(1.15rem, 2.2vw, 1.42rem);
  --t-lead: clamp(1.02rem, 1.5vw, 1.18rem);
  --t-body: 1rem;
  --t-sm: 0.95rem;
  --t-xs: 0.85rem;
  --t-mono: 0.73rem;

  /* Line heights */
  --lh-display: 1.03;
  --lh-heading: 1.14;
  --lh-body: 1.68;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.22s;
  --dur-slow: 0.42s;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(13, 13, 13, 0.04);
  --shadow-md: 0 18px 44px -22px rgba(13, 13, 13, 0.3);
  --shadow-pop: 0 40px 90px -30px rgba(0, 0, 0, 0.75);
}

/* Dark scope */
.on-dark {
  --bg: #0a0a0a;
  --bg-soft: #101010;
  --fill: rgba(255, 255, 255, 0.05);
  --fill-2: rgba(255, 255, 255, 0.1);
  --card: rgba(255, 255, 255, 0.045);

  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.22);

  --ink: #fbfbfb;
  --muted: rgba(251, 251, 251, 0.64);
  --faint: rgba(251, 251, 251, 0.44);

  --accent: #2f4dff;
  --accent-hover: #4c66ff;
  --accent-soft: rgba(110, 133, 255, 0.14);
  --accent-ink: #93a4ff;

  --shadow-sm: none;
  --shadow-md: 0 24px 60px -30px rgba(0, 0, 0, 0.9);

  background: var(--bg);
  color: var(--ink);
}

@media (min-width: 768px) {
  :root {
    --pad-x: 32px;
    --nav-h: 76px;
  }
}

@media (min-width: 1280px) {
  :root {
    --pad-x: 48px;
  }
}