/* ═══════════════════════════════════════════════════════════
   TRADEPRESS V2.0 — tokens.css
   Design Tokens: colors, spacing, fonts, shadows
   Single source of truth — all components depend on this
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Brand Colors ── */
  --tp-primary:   #0a20d6;
  --tp-secondary: #1da9f8;
  --tp-accent:     #51dff5;

  /* ── Backgrounds ── */
  --tp-bg-core:    #050814;
  --tp-bg-card:    #0b1126;
  --tp-bg-elev:    #111c3a;

  /* ── Text ── */
  --tp-text:       #e8ecf4;
  --tp-text-dim:   #8a9bb8;

  /* ── Semantic ── */
  --tp-negative:   #ff6b6b;

  /* ── Border ── */
  --tp-border:     rgba(29,169,248,0.15);

  /* ── Fonts ── */
  --tp-font-sans:  'Inter', sans-serif;
  --tp-font-mono:  'SF Mono','Segoe UI Mono','Roboto Mono',monospace;

  /* ── Spacing Scale ── */
  --tp-pad-xs:  .5rem;
  --tp-pad-sm:  .75rem;
  --tp-pad-md:  1rem;
  --tp-pad-lg:  1.5rem;
  --tp-pad-xl:  2rem;
  --tp-pad-2xl: 3rem;

  /* ── Flyout ── */
  --tp-flyout-bg:  rgba(11,17,38,0.97);
  --tp-flyout-gap: 0.5rem;

  /* ── Icon Color Variants ── */
  --tp-icon-blue-bg:   rgba(10,32,214,0.12);
  --tp-icon-blue-fg:   #1da9f8;
  --tp-icon-cyan-bg:   rgba(29,169,248,0.10);
  --tp-icon-cyan-fg:   #51dff5;
  --tp-icon-accent-bg: rgba(81,223,245,0.08);
  --tp-icon-accent-fg: #0a20d6;

  /* ── Shadows ── */
  --tp-shadow-md:   0 20px 56px rgba(0,0,0,0.5);
  --tp-shadow-lg:   0 32px 80px rgba(0,0,0,0.5);
  --tp-shadow-glow:  0 0 120px rgba(10,32,214,0.15);

  /* ── Radius ── */
  --tp-radius-sm:  10px;
  --tp-radius-md:  14px;
  --tp-radius-lg:  18px;
  --tp-radius-xl:  28px;

  /* ── Transitions ── */
  --tp-transition-fast:  .15s ease;
  --tp-transition-base:  .2s ease;
  --tp-transition-slow:  .4s ease;
}