/* ══════════════════════════════════════════════════════
   NetGain Bot Trading Design Tokens v2.0
   public_html/usdt/assets/css/design-tokens.css
   ══════════════════════════════════════════════════════ */
:root {
  /* Brand — electric cyan + deep space dark */
  --color-cyan:         #00D4FF;
  --color-cyan-dim:     rgba(0,212,255,.14);
  --color-cyan-glow:    rgba(0,212,255,.30);
  --color-emerald:      #00E5A0;
  --color-emerald-dim:  rgba(0,229,160,.12);
  --color-emerald-glow: rgba(0,229,160,.28);
  --color-violet:       #7C5CFC;
  --color-violet-dim:   rgba(124,92,252,.12);

  /* Legacy gold kept only for tier accents on packages */
  --color-gold:        #F0C040;
  --color-gold-dark:   #C09020;
  --color-gold-light:  rgba(240,192,64,.15);

  /* Status */
  --color-red:         #FF4D6A;
  --color-red-light:   rgba(255,77,106,.12);
  --color-amber:       #FFB020;
  --color-amber-light: rgba(255,176,32,.12);
  --color-green:       #00C97A;
  --color-green-light: rgba(0,201,122,.12);
  --color-blue:        #3B9EFF;
  --color-blue-light:  rgba(59,158,255,.12);
  --color-purple:      #A855F7;
  --color-purple-light:rgba(168,85,247,.12);
  --color-teal:        #00C9C9;
  --color-teal-light:  rgba(0,201,201,.12);

  /* Space palette */
  --space-900: #060D17;
  --space-800: #0A1520;
  --space-700: #0F1E2E;
  --space-600: #152438;
  --space-500: #1C2F46;
  --space-400: #263D56;
  --space-300: #375470;
  --space-200: #4D6E8A;
  --space-100: #7A94AA;
  --space-50:  #A8BCC8;

  /* Typography */
  --font-primary: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", monospace;
  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  38px;

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-full: 9999px;

  /* Shadows / glows */
  --shadow-sm:     0 1px 3px rgba(0,0,0,.45);
  --shadow-md:     0 4px 14px rgba(0,0,0,.55);
  --shadow-lg:     0 12px 40px rgba(0,0,0,.65);
  --glow-cyan:     0 0 18px rgba(0,212,255,.22), 0 0 40px rgba(0,212,255,.10);
  --glow-emerald:  0 0 18px rgba(0,229,160,.22), 0 0 40px rgba(0,229,160,.10);

  /* Layout */
  --topnav-h:    56px;
  --subnav-h:    48px;
  --sidebar-w:   256px; /* kept for compat refs, not used in layout */

  /* Semantic surfaces — dark everywhere */
  --surface-shell:   var(--space-900);
  --surface-topnav:  var(--space-800);
  --surface-sidebar: var(--space-800); /* compat */
  --surface-page:    var(--space-900);
  --surface-card:    var(--space-700);
  --surface-card-hi: var(--space-600);
  --border-subtle:   rgba(255,255,255,.07);
  --border-glow:     rgba(0,212,255,.20);
  --text-primary:    #EDF2F7;
  --text-muted:      var(--space-100);
  --text-faint:      var(--space-200);
  --text-on-dark:    #EDF2F7;
  --text-on-dark-mut:var(--space-100);

  --transition: .16s ease;
}

/* Light mode toggle — not the default, but still supported */
[data-theme="light"] {
  --surface-page:    #F0F4F8;
  --surface-card:    #FFFFFF;
  --surface-card-hi: #F7FAFC;
  --border-subtle:   rgba(0,0,0,.08);
  --text-primary:    #1A2433;
  --text-muted:      #4A6070;
  --text-faint:      #8AABBF;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08);
  --shadow-md:   0 4px 14px rgba(0,0,0,.12);
  --shadow-lg:   0 12px 40px rgba(0,0,0,.18);
  --glow-cyan:   0 0 12px rgba(0,212,255,.18);
  --glow-emerald:0 0 12px rgba(0,229,160,.18);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}