/**
 * BNClaw Design System — Design Tokens
 * Binance Dark Terminal 深色科技感风格
 * 向后兼容现有所有页面的 CSS 变量名
 */

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* === Dark Theme (Default) === */
:root {
  /* --- Core Backgrounds --- */
  --bg-deep:        #0b0e11;
  --bg-primary:     #12161c;
  --bg-secondary:   #1a1f27;
  --bg-elevated:    #1e2329;
  --bg-hover:       #2b3139;
  --bg-active:      #2b3139;

  /* --- Borders --- */
  --border-primary: #2b3139;
  --border-subtle:  #1e2329;
  --border-accent:  rgba(240,185,11,0.13);

  /* --- Text --- */
  --text-primary:   #eaecef;
  --text-secondary: #848e9c;
  --text-tertiary:  #5e6673;
  --text-inverse:   #0b0e11;

  /* --- Accent (Binance Gold) --- */
  --accent-primary: #f0b90b;
  --accent-hover:   #fcd535;
  --accent-dim:     rgba(240,185,11,0.2);

  /* --- Semantic Colors --- */
  --color-profit:   #0ecb81;
  --color-loss:     #f6465d;
  --color-warning:  #f0b90b;
  --color-info:     #1e88e5;

  /* --- Glow Effects --- */
  --glow-green:     0 0 12px rgba(14,203,129,0.3);
  --glow-red:       0 0 12px rgba(246,70,93,0.3);
  --glow-gold:      0 0 12px rgba(240,185,11,0.3);
  --glow-blue:      0 0 12px rgba(30,136,229,0.3);

  /* --- Glassmorphism --- */
  --glass-bg:       rgba(18,22,28,0.8);
  --glass-border:   rgba(255,255,255,0.06);
  --glass-blur:     blur(12px);

  /* --- Risk/Signal --- */
  --risk-extreme:   #f6465d;
  --risk-high:      #f5a623;
  --risk-medium:    #f0b90b;
  --risk-low:       #0ecb81;
  --signal-green:   #0ecb81;
  --signal-yellow:  #f0b90b;
  --signal-orange:  #f5a623;
  --signal-red:     #f6465d;

  /* --- Typography --- */
  --font-sans:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-mono:      'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;

  /* --- Spacing --- */
  --space-xs: 4px;  --space-sm: 8px;  --space-md: 12px;
  --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px;

  /* --- Border Radius --- */
  --radius-sm: 4px;  --radius-md: 8px;  --radius-lg: 12px;
  --radius-xl: 16px; --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.5);

  /* --- Transitions --- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* === 向后兼容别名（现有页面引用的变量名） === */
  --bg:             var(--bg-primary);
  --card-bg:        var(--bg-secondary);
  --card-border:    var(--border-primary);
  --card:           var(--bg-secondary);
  --border:         var(--border-primary);
  --text:           var(--text-primary);
  --text-secondary: var(--text-secondary);
  --text-muted:     var(--text-tertiary);
  --muted:          var(--text-tertiary);
  --title:          var(--accent-primary);
  --link:           var(--color-info);
  --profit:         var(--color-profit);
  --loss:           var(--color-loss);
  --gain:           var(--color-profit);
  --th-bg:          var(--bg-hover);
  --td-border:      var(--border-primary);
  --tag-long-bg:    rgba(14,203,129,0.12);
  --tag-long-color: var(--color-profit);
  --accent:         var(--accent-primary);
  --input-bg:       var(--bg-deep);
  --input-border:   var(--border-primary);
}

/* === Light Theme === */
[data-theme="light"] {
  --bg-deep:        #f0f0f0;
  --bg-primary:     #f5f5f5;
  --bg-secondary:   #ffffff;
  --bg-elevated:    #ffffff;
  --bg-hover:       #e8eef7;
  --bg-active:      #dde5f0;
  --border-primary: #e0e0e0;
  --border-subtle:  #eee;
  --border-accent:  rgba(21,101,192,0.15);
  --text-primary:   #333;
  --text-secondary: #555;
  --text-tertiary:  #888;
  --text-inverse:   #fff;
  --accent-primary: #1565c0;
  --accent-hover:   #1976d2;
  --accent-dim:     rgba(21,101,192,0.1);
  --color-profit:   #2e7d32;
  --color-loss:     #c62828;
  --color-warning:  #e65100;
  --color-info:     #1976d2;
  --glow-green:     0 0 8px rgba(46,125,50,0.2);
  --glow-red:       0 0 8px rgba(198,40,40,0.2);
  --glow-gold:      0 0 8px rgba(21,101,192,0.2);
  --glow-blue:      0 0 8px rgba(25,118,210,0.2);
  --glass-bg:       rgba(255,255,255,0.85);
  --glass-border:   rgba(0,0,0,0.06);
  --glass-blur:     blur(12px);
  --risk-extreme:   #c62828;
  --risk-high:      #e65100;
  --risk-medium:    #f9a825;
  --risk-low:       #2e7d32;
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.15);
}

/* 兼容 history.html 的 class-based 主题 */
body.light {
  --bg: #f5f5f5; --card-bg: #fff; --card-border: #e0e0e0;
  --text: #333; --text-secondary: #555; --text-muted: #888;
  --th-bg: #e8eef7; --td-border: #eee; --title: #1565c0; --link: #1976d2;
  --profit: #2e7d32; --loss: #c62828;
}

/* === Base Typography === */
body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  font-size: 14px;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--accent-hover); }

code, .mono { font-family: var(--font-mono); }