/* ============================================================================
 * tradeStack — Design Tokens
 * Dark-first. Palette inspired by TradingView chart UI + RunPod accent.
 * ========================================================================= */

:root {
  /* ── surfaces (RunPod dark: page slightly darker than cards) ──────── */
  --bg-base:            #121212;   /* page background (RunPod exact) */
  --bg-canvas:          #121212;
  --bg-surface:         #181818;   /* cards (RunPod exact) */
  --bg-surface-raised:  #1f1f1f;   /* card hover */
  --bg-surface-strong:  #242424;   /* popovers, active states */
  --bg-inset:           #0e0e0e;   /* inputs */

  /* ── borders (RunPod uses gray-base/20 = rgba(107,114,128,0.2)) ──────── */
  --gray-base-rgb:      107, 114, 128;
  --border-faint:       rgba(var(--gray-base-rgb), 0.10);
  --border-subtle:      rgba(var(--gray-base-rgb), 0.20);   /* RunPod card */
  --border-default:     rgba(var(--gray-base-rgb), 0.30);
  --border-strong:      rgba(var(--gray-base-rgb), 0.45);

  /* ── text (RunPod: pure white, secondary at 75%/50%) ───────────────── */
  --text-primary:       #ffffff;
  --text-secondary:     rgba(255, 255, 255, 0.75);
  --text-tertiary:      rgba(255, 255, 255, 0.55);
  --text-muted:         rgba(255, 255, 255, 0.35);
  --text-inverse:       #121212;

  /* ── directional (TradingView candles) ───────────────────────────────── */
  --up:                 #26a69a;
  --up-bright:          #4fd3c4;
  --up-soft:            rgba(38, 166, 154, 0.10);
  --up-softer:          rgba(38, 166, 154, 0.05);
  --down:               #ef5350;
  --down-bright:        #ff7b76;
  --down-soft:          rgba(239, 83, 80, 0.10);
  --down-softer:        rgba(239, 83, 80, 0.05);

  /* ── accent (RunPod signature violet: rgb(95, 76, 254) ───────────── */
  --accent:             #5f4cfe;
  --accent-hover:       #4d38f5;
  --accent-secondary:   #9289fe;   /* lighter for links in dark mode */
  --accent-dim:         #4d38f5;
  --accent-soft:        rgba(95, 76, 254, 0.12);
  --accent-softer:      rgba(95, 76, 254, 0.06);
  --accent-glow:        rgba(95, 76, 254, 0.35);

  /* ── status ──────────────────────────────────────────────────────────── */
  --info:               #3b82f6;
  --info-soft:          rgba(59, 130, 246, 0.12);
  --warning:            #f7b955;
  --warning-soft:       rgba(247, 185, 85, 0.12);
  --success:            #26a69a;
  --danger:             #ef5350;

  /* ── shadows ─────────────────────────────────────────────────────────── */
  --shadow-xs:          0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm:          0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-md:          0 6px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg:          0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-glow-accent: 0 0 0 1px var(--accent), 0 0 20px var(--accent-glow);
  --shadow-inset:       inset 0 1px 0 rgba(255, 255, 255, 0.03);

  /* ── radii (RunPod: small, 4px default) ─────────────────────────── */
  --radius-xs:          2px;
  --radius-sm:          4px;   /* RunPod .rounded = 0.25rem */
  --radius-md:          4px;   /* card default (RunPod) */
  --radius-lg:          4px;
  --radius-xl:          6px;
  --radius-pill:        999px;

  /* ── typography ──────────────────────────────────────────────────────── */
  --font-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono:
    "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Mono",
    "Roboto Mono", Menlo, monospace;

  --text-xs:            11px;
  --text-sm:            12px;
  --text-base:          13px;
  --text-md:            14px;
  --text-lg:            16px;
  --text-xl:            18px;
  --text-2xl:           22px;
  --text-3xl:           28px;
  --text-4xl:           34px;
  --text-5xl:           44px;

  --leading-tight:      1.2;
  --leading-snug:       1.35;
  --leading-normal:     1.5;

  --tracking-tight:     -0.015em;
  --tracking-normal:    0;
  --tracking-wide:      0.03em;
  --tracking-caps:      0.06em;

  /* ── spacing (4px base) ──────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── motion ──────────────────────────────────────────────────────────── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   320ms;

  /* ── layout ──────────────────────────────────────────────────────────── */
  --topbar-height:      64px;
  --content-max-width:  1600px;
  --content-gutter:     24px;
  --content-gutter-sm:  16px;
}