/*
 * TradeZone Design Token System
 * Single source of truth for all UI values.
 * Usage: var(--tz-bg-page), var(--tz-accent), etc.
 */

:root {
  /* ── Backgrounds ──────────────────────────────── */
  --tz-bg-page:       #111420;
  --tz-bg-card:       #1e2330;
  --tz-bg-card-inner: #252b3b;
  --tz-bg-deep:       #161b27;
  --tz-bg-input:      #252b3b;
  --tz-bg-hover:      #2d3447;

  /* ── Borders ──────────────────────────────────── */
  --tz-border:        #2d3447;
  --tz-border-light:  #1a1f2e;
  --tz-border-input:  #363f56;

  /* ── Brand / Accent ───────────────────────────── */
  --tz-accent:        #f39c12;
  --tz-accent-hover:  #e08e0b;
  --tz-accent-muted:  rgba(243,156,18,.15);
  --tz-purple:        #6c5ce7;
  --tz-purple-hover:  #7d6ef0;
  --tz-purple-muted:  rgba(108,92,231,.15);
  --tz-blue:          #5bc0de;
  --tz-blue-muted:    rgba(91,192,222,.15);

  /* ── Semantic Colors ──────────────────────────── */
  --tz-success:       #5cb85c;
  --tz-success-muted: rgba(92,184,92,.12);
  --tz-danger:        #e74c3c;
  --tz-danger-muted:  rgba(231,76,60,.12);
  --tz-warning:       #f39c12;
  --tz-warning-muted: rgba(243,156,18,.12);
  --tz-info:          #5bc0de;

  /* ── Text ─────────────────────────────────────── */
  --tz-text-primary:  #ffffff;
  --tz-text-body:     #ccc;
  --tz-text-muted:    #8892a4;
  --tz-text-faint:    #555;

  /* ── Typography ───────────────────────────────── */
  --tz-font-sans:     'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tz-font-mono:     'Roboto Mono', 'SFMono-Regular', Menlo, monospace;
  --tz-font-size-xs:  11px;
  --tz-font-size-sm:  12px;
  --tz-font-size-md:  13px;
  --tz-font-size-base:14px;
  --tz-font-size-lg:  16px;
  --tz-font-size-xl:  18px;
  --tz-font-size-2xl: 20px;
  --tz-font-size-3xl: 24px;
  --tz-line-height:   1.6;

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

  /* ── Radii ────────────────────────────────────── */
  --tz-radius-sm:  4px;
  --tz-radius-md:  6px;
  --tz-radius-lg:  8px;
  --tz-radius-xl:  12px;
  --tz-radius-pill:999px;

  /* ── Shadows ──────────────────────────────────── */
  --tz-shadow-sm:  0 1px 4px rgba(0,0,0,.4);
  --tz-shadow-md:  0 4px 12px rgba(0,0,0,.5);
  --tz-shadow-lg:  0 8px 24px rgba(0,0,0,.6);

  /* ── Transitions ──────────────────────────────── */
  --tz-transition:      0.15s ease;
  --tz-transition-slow: 0.3s ease;

  /* ── Z-index layers ───────────────────────────── */
  --tz-z-dropdown: 1000;
  --tz-z-modal:    9000;
  --tz-z-toast:    9999;

  /* ── Component: Card ─────────────────────────── */
  --card-bg:        var(--tz-bg-card);

  /* ── Component: Button ───────────────────────── */
  --tz-btn-radius:  var(--tz-radius-sm);
  --tz-btn-padding: 7px 16px;

  /* ── Component: Input ────────────────────────── */
  --tz-input-bg:     var(--tz-bg-input);
  --tz-input-border: var(--tz-border);
  --tz-input-color:  var(--tz-text-primary);
  --tz-input-radius: var(--tz-radius-sm);
  --tz-input-focus:  var(--tz-purple);

  /* ── Component: Table ────────────────────────── */
  --tz-table-border:    var(--tz-border-light);
  --tz-table-hover-bg:  var(--tz-bg-deep);
  --tz-table-head-color:var(--tz-text-muted);

  /* ── Price colors ────────────────────────────── */
  --tz-price-up:   var(--tz-success);
  --tz-price-down: var(--tz-danger);
  --tz-price-flat: var(--tz-text-muted);
}

/* ── Global resets using tokens ───────────────────── */
body {
  font-family: var(--tz-font-sans);
  color: var(--tz-text-body);
  line-height: var(--tz-line-height);
}

/* ── Utility classes ──────────────────────────────── */
.tz-card {
  background: var(--tz-bg-card);
  border-radius: var(--tz-radius-lg);
  padding: var(--tz-space-5);
  margin-bottom: var(--tz-space-5);
}

.tz-card-inner {
  background: var(--tz-bg-card-inner);
  border-radius: var(--tz-radius-md);
  padding: var(--tz-space-4);
}

.tz-input {
  background: var(--tz-input-bg);
  border: 1px solid var(--tz-input-border);
  color: var(--tz-input-color);
  border-radius: var(--tz-input-radius);
  padding: 8px 12px;
  font-size: var(--tz-font-size-md);
  width: 100%;
  outline: none;
  transition: border-color var(--tz-transition);
}
.tz-input:focus {
  border-color: var(--tz-input-focus);
}

.tz-btn {
  display: inline-block;
  padding: var(--tz-btn-padding);
  border: none;
  border-radius: var(--tz-btn-radius);
  cursor: pointer;
  font-size: var(--tz-font-size-md);
  font-weight: 600;
  transition: background var(--tz-transition), opacity var(--tz-transition);
  text-decoration: none;
}
.tz-btn-primary { background: var(--tz-accent);  color: #1e2330; }
.tz-btn-primary:hover { background: var(--tz-accent-hover); }
.tz-btn-purple  { background: var(--tz-purple); color: #fff; }
.tz-btn-purple:hover { background: var(--tz-purple-hover); }
.tz-btn-success { background: var(--tz-success); color: #fff; }
.tz-btn-danger  { background: var(--tz-danger);  color: #fff; }
.tz-btn-ghost   { background: var(--tz-bg-card-inner); color: var(--tz-text-body); border: 1px solid var(--tz-border); }
.tz-btn-ghost:hover { background: var(--tz-bg-hover); color: var(--tz-text-primary); }

.tz-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--tz-radius-pill);
  font-size: var(--tz-font-size-xs);
  font-weight: 700;
}
.tz-badge-success { background: var(--tz-success-muted); color: var(--tz-success); }
.tz-badge-danger  { background: var(--tz-danger-muted);  color: var(--tz-danger); }
.tz-badge-warning { background: var(--tz-warning-muted); color: var(--tz-warning); }
.tz-badge-purple  { background: var(--tz-purple-muted);  color: var(--tz-purple); }
.tz-badge-info    { background: var(--tz-blue-muted);    color: var(--tz-blue); }

.tz-text-muted   { color: var(--tz-text-muted); }
.tz-text-accent  { color: var(--tz-accent); }
.tz-text-success { color: var(--tz-success); }
.tz-text-danger  { color: var(--tz-danger); }
.tz-text-purple  { color: var(--tz-purple); }
.tz-text-blue    { color: var(--tz-blue); }

.tz-divider {
  border: none;
  border-top: 1px solid var(--tz-border);
  margin: var(--tz-space-4) 0;
}

.tz-stat-box {
  background: var(--tz-bg-deep);
  border-radius: var(--tz-radius-md);
  padding: var(--tz-space-4) var(--tz-space-5);
  text-align: center;
}
.tz-stat-box .tz-lbl { font-size: var(--tz-font-size-xs); color: var(--tz-text-muted); text-transform: uppercase; letter-spacing: .5px; }
.tz-stat-box .tz-val { font-size: var(--tz-font-size-xl); font-weight: bold; color: var(--tz-text-primary); margin-top: 3px; }

.tz-price-up   { color: var(--tz-price-up); }
.tz-price-down { color: var(--tz-price-down); }
.tz-price-flat { color: var(--tz-price-flat); }

/* ── Dark table ───────────────────────────────────── */
.tz-table { width: 100%; border-collapse: collapse; font-size: var(--tz-font-size-md); color: var(--tz-text-body); }
.tz-table th { color: var(--tz-table-head-color); font-size: var(--tz-font-size-xs); text-transform: uppercase; letter-spacing: .5px; padding: 10px 12px; border-bottom: 2px solid var(--tz-border); }
.tz-table td { padding: 10px 12px; border-bottom: 1px solid var(--tz-table-border); vertical-align: middle; }
.tz-table tr:last-child td { border-bottom: none; }
.tz-table tr:hover td { background: var(--tz-table-hover-bg); }

/* ── Light Mode Token Overrides ───────────────────── */
/* Triggered when body#light (existing ThinkPHP cookie mechanism) */
body#light {
  --tz-bg-page:       #f4f6f9;
  --tz-bg-card:       #ffffff;
  --tz-bg-card-inner: #f4f6f9;
  --tz-bg-deep:       #edf0f5;
  --tz-bg-input:      #ffffff;
  --tz-bg-hover:      #e8ecf3;

  --tz-border:        #d8e0ea;
  --tz-border-light:  #e8ecf3;
  --tz-border-input:  #c5d0de;

  --tz-text-primary:  #1a2a3a;
  --tz-text-body:     #3a4a5a;
  --tz-text-muted:    #6a7a8a;
  --tz-text-faint:    #aabac9;

  --tz-table-hover-bg: #f0f3f8;
  --card-bg:           #ffffff;

  color-scheme: light;
}

/* ── Dark mode toggle button state indicator ─────── */
.tz-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--tz-bg-card-inner);
  border: 1px solid var(--tz-border);
  border-radius: var(--tz-radius-pill);
  padding: 5px 12px;
  cursor: pointer;
  font-size: var(--tz-font-size-sm);
  color: var(--tz-text-muted);
  transition: background var(--tz-transition), color var(--tz-transition);
}
.tz-theme-toggle:hover {
  background: var(--tz-bg-hover);
  color: var(--tz-text-primary);
}
.tz-theme-toggle .icon-sun  { display: none; }
.tz-theme-toggle .icon-moon { display: inline; }
body#light .tz-theme-toggle .icon-sun  { display: inline; }
body#light .tz-theme-toggle .icon-moon { display: none; }