/* ═══════════════════════════════════════════════════════
   Autonix Trader — Design Tokens  (v11)
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Core palette ── */
  --color-green:        #00E5A0;
  --color-green-dim:    #00b87e;
  --color-green-glow:   rgba(0, 229, 160, .28);
  --color-green-glow2:  rgba(0, 229, 160, .09);
  --color-red:          #FF4560;
  --color-red-dim:      #d63050;
  --color-red-glow:     rgba(255, 69, 96, .28);
  --color-amber:        #F59E0B;
  --color-blue:         #5b9dff;

  /* ── Typography ── */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs:   10px;
  --font-size-sm:   11px;
  --font-size-md:   13px;
  --font-size-base: 14px;
  --font-size-lg:   16px;
  --font-size-xl:   20px;
  --font-size-2xl:  24px;

  /* ── Radius ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-2xl:  22px;
  --radius-3xl:  28px;
  --radius-pill: 9999px;

  /* ── Spacing ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* ── Transition ── */
  --transition-fast: 140ms ease;
  --transition-base: 240ms ease;
  --transition-slow: 380ms cubic-bezier(.4, 0, .2, 1);

  /* ── Layout ── */
  --nav-height:  52px;
  --rail-width:  60px;
  --trade-width: 320px;
  --pos-width:   280px;

  /* ── Bot accent ── */
  --bot-accent:     #00E5A0;
  --bot-accent-dim: #00b87e;
}

/* ══════════════════════════════════════════════
   DARK THEME — pure black base
   ══════════════════════════════════════════════ */
[data-theme="dark"],
:root {
  --bg:          #000000;
  --bg-panel:    #060606;
  --bg-elevated: #0e0e0e;
  --bg-card:     #0a0a0a;
  --bg-hover:    #141414;
  --bg-active:   #1c1c1c;
  --bg-glass:    rgba(255, 255, 255, .03);
  --bg-glass2:   rgba(255, 255, 255, .06);
  --bg-input:    rgba(0, 0, 0, .45);

  --border:        rgba(255, 255, 255, .07);
  --border-subtle: rgba(255, 255, 255, .035);
  --border-accent: rgba(0, 229, 160, .32);
  --border-card:   rgba(255, 255, 255, .065);

  --text-primary:   #FFFFFF;
  --text-secondary: #C2C8D4;
  --text-muted:     #5e6673;
  --text-dim:       #2e333d;

  /* Floating card shadows */
  --shadow-float:  0 16px 64px rgba(0,0,0,.96), 0 4px 16px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.04) inset;
  --shadow-panel:  0 8px 40px rgba(0,0,0,.9),   0 2px 8px rgba(0,0,0,.6);
  --shadow-card:   0 6px 32px rgba(0,0,0,.75),  0 1px 4px rgba(0,0,0,.5);
  --shadow-glow:   0 0 28px var(--color-green-glow), 0 0 56px var(--color-green-glow2);
  --shadow-nav:    0 1px 0 rgba(255,255,255,.05);

  /* Nav glass */
  --nav-bg:     rgba(0,0,0,.82);
  --nav-blur:   blur(28px);

  /* Rail */
  --rail-bg:    rgba(4,4,4,.9);
}

/* ══════════════════════════════════════════════
   LIGHT THEME — clean, premium, warm white
   ══════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:          #F2F4F7;
  --bg-panel:    #FFFFFF;
  --bg-elevated: #FAFBFC;
  --bg-card:     #FFFFFF;
  --bg-hover:    #F4F6F9;
  --bg-active:   #E8ECF2;
  --bg-glass:    rgba(0, 0, 0, .025);
  --bg-glass2:   rgba(0, 0, 0, .05);
  --bg-input:    rgba(255, 255, 255, .9);

  --border:        rgba(0, 0, 0, .09);
  --border-subtle: rgba(0, 0, 0, .045);
  --border-accent: rgba(0, 180, 125, .45);
  --border-card:   rgba(0, 0, 0, .08);

  --text-primary:   #0D1117;
  --text-secondary: #374151;
  --text-muted:     #6B7280;
  --text-dim:       #B0B8C4;

  /* Floating card shadows — lifted, soft */
  --shadow-float:  0 12px 48px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.07), 0 1px 0 rgba(255,255,255,.9) inset;
  --shadow-panel:  0 4px 24px rgba(0,0,0,.10),  0 1px 4px rgba(0,0,0,.06);
  --shadow-card:   0 2px 16px rgba(0,0,0,.08),  0 1px 3px rgba(0,0,0,.04);
  --shadow-glow:   0 0 24px rgba(0,229,160,.18), 0 0 48px rgba(0,229,160,.07);
  --shadow-nav:    0 1px 0 rgba(0,0,0,.06);

  /* Nav glass */
  --nav-bg:     rgba(255,255,255,.88);
  --nav-blur:   blur(28px);

  /* Rail */
  --rail-bg:    rgba(255,255,255,.95);
}