/* ══════════════════════════════════════════════════════
   APXTrading Design Tokens v1.0
   bot/assets/css/design-tokens.css
   ══════════════════════════════════════════════════════ */
:root {
  /* Brand Colors */
  --color-gold:        #C9A84C;
  --color-gold-light:  #F5E9C9;
  --color-gold-dark:   #A07C2A;
  --color-navy:        #0D1B2A;
  --color-navy-mid:    #1A3550;
  --color-navy-light:  #2A4A6B;

  /* Status Colors */
  --color-teal:        #0E8A7A;
  --color-teal-light:  #D4F0EC;
  --color-red:         #B91C1C;
  --color-red-light:   #FEE2E2;
  --color-green:       #15803D;
  --color-green-light: #DCFCE7;
  --color-amber:       #B45309;
  --color-amber-light: #FEF3C7;
  --color-blue:        #1A5FA8;
  --color-blue-light:  #D6E8FA;
  --color-purple:      #7C3AED;
  --color-purple-light:#EDE9FE;

  /* Neutral Scale */
  --gray-50:  #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-400: #9CA3AF;
  --gray-600: #4B5563;
  --gray-800: #1F2937;

  /* 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:  36px;

  /* 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-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(13,27,42,.06);
  --shadow-md: 0 4px 12px rgba(13,27,42,.10);
  --shadow-lg: 0 12px 32px rgba(13,27,42,.16);
  --shadow-gold: 0 4px 20px rgba(201,168,76,.25);

  /* Layout */
  --sidebar-w: 256px;
  --topbar-h:  60px;

  /* Semantic surface tokens — dark shell, light content */
  --surface-shell:   var(--color-navy);
  --surface-sidebar: var(--color-navy-mid);
  --surface-page:    var(--gray-50);
  --surface-card:    #FFFFFF;
  --border-subtle:   var(--gray-200);
  --text-primary:    var(--gray-800);
  --text-muted:      var(--gray-600);
  --text-faint:      var(--gray-400);
  --text-on-dark:    #EAF0F7;
  --text-on-dark-mut:#8FA6BF;

  --transition: .16s ease;
}

/* Dark mode — the shell is already dark; this flips the content area */
[data-theme="dark"] {
  --surface-page:  #0A1420;
  --surface-card:  #12212F;
  --border-subtle: #24384B;
  --text-primary:  #EAF0F7;
  --text-muted:    #9FB3C8;
  --text-faint:    #64798F;
  --gray-50:       #0A1420;
  --gray-100:      #12212F;
  --gray-200:      #24384B;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 4px 12px rgba(0,0,0,.40);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.50);
}

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