/*
 * TradeZone — REVAMP design system (Task #73)
 * Re-tunes the --tz-* tokens to a modern, premium trading aesthetic and adds a
 * polished component layer. Loaded AFTER design-tokens.css so it overrides.
 * PREVIEW ONLY until linked in the live header.
 */

:root {
  /* ── Backgrounds: aligned to the logo shell (#0C1520) ── */
  --tz-bg-page:       #0a0f17;
  --tz-bg-card:       #121925;
  --tz-bg-card-inner: #18212f;
  --tz-bg-deep:       #0c1520;   /* logo shell */
  --tz-bg-input:      #161f2c;
  --tz-bg-hover:      #1b2533;

  /* ── Borders ── */
  --tz-border:        #20293a;
  --tz-border-light:  #161e2a;
  --tz-border-input:  #2c3850;

  /* ── Brand: GOLD primary (logo Z #D4A017), teal secondary ── */
  --tz-accent:        #d4a017;
  --tz-accent-hover:  #e6b52a;
  --tz-accent-muted:  rgba(212,160,23,.15);
  --tz-secondary:     #23c99d;
  --tz-secondary-muted: rgba(35,201,157,.14);
  --tz-purple:        #7c6cff;
  --tz-purple-muted:  rgba(124,108,255,.14);
  --tz-gold:          #d4a017;

  /* ── Semantic: crisper buy/sell ── */
  --tz-success:       #1fc77b;
  --tz-success-muted: rgba(31,199,123,.14);
  --tz-danger:        #f6465d;
  --tz-danger-muted:  rgba(246,70,93,.14);
  --tz-warning:       #f0b90b;
  --tz-info:          #16a3fe;

  /* ── Text: higher contrast ── */
  --tz-text-primary:  #f5f7fb;
  --tz-text-body:     #c4cce0;
  --tz-text-muted:    #7d8aa6;
  --tz-text-faint:    #4a5570;

  /* ── Type scale: a touch larger/cleaner ── */
  --tz-font-sans:     'Inter','Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --tz-font-size-base:14px;
  --tz-line-height:   1.55;

  /* ── Radii: softer, modern ── */
  --tz-radius-md:  8px;
  --tz-radius-lg:  12px;
  --tz-radius-xl:  16px;

  /* ── Shadows: soft depth + a brand glow ── */
  --tz-shadow-sm:  0 1px 3px rgba(0,0,0,.35);
  --tz-shadow-md:  0 6px 18px rgba(0,0,0,.45);
  --tz-shadow-lg:  0 16px 40px rgba(0,0,0,.55);
  --tz-glow:       0 0 0 3px rgba(212,160,23,.20);
}

/* ─────────────────────────── Component layer (.tzr-*) ─────────────────────── */

.tzr-card {
  background: var(--tz-bg-card);
  border: 1px solid var(--tz-border);
  border-radius: var(--tz-radius-lg);
  box-shadow: var(--tz-shadow-sm);
  padding: var(--tz-space-5);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.tzr-card:hover { border-color: var(--tz-border-input); box-shadow: var(--tz-shadow-md); }

.tzr-stat {
  background: linear-gradient(180deg, var(--tz-bg-card) 0%, var(--tz-bg-deep) 100%);
  border: 1px solid var(--tz-border);
  border-radius: var(--tz-radius-lg);
  padding: var(--tz-space-5);
}
.tzr-stat .lbl { color: var(--tz-text-muted); font-size: var(--tz-font-size-xs); text-transform: uppercase; letter-spacing: .06em; }
.tzr-stat .val { color: var(--tz-text-primary); font-size: var(--tz-font-size-3xl); font-weight: 800; margin-top: 6px; }

.tzr-btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  border: none; cursor: pointer; font-weight: 700; font-size: var(--tz-font-size-base);
  padding: 11px 20px; border-radius: var(--tz-radius-md); color: #0c1520;
  background: linear-gradient(180deg, var(--tz-accent-hover) 0%, var(--tz-accent) 100%);
  box-shadow: 0 4px 14px rgba(212,160,23,.28); transition: transform .12s ease, box-shadow .12s ease, opacity .12s;
}
.tzr-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(212,160,23,.40); }
.tzr-btn:active { transform: translateY(0); }
.tzr-btn--ghost { background: transparent; color: var(--tz-accent); border: 1px solid var(--tz-border-input); box-shadow: none; }
.tzr-btn--ghost:hover { background: var(--tz-accent-muted); }
.tzr-btn--buy  { color:#fff; background: linear-gradient(180deg,var(--tz-success),#19a767); box-shadow: 0 4px 14px rgba(31,199,123,.3); }
.tzr-btn--sell { color:#fff; background: linear-gradient(180deg,var(--tz-danger),#d3344b);  box-shadow: 0 4px 14px rgba(246,70,93,.3); }

.tzr-input {
  width: 100%; background: var(--tz-bg-input); border: 1px solid var(--tz-border-input);
  border-radius: var(--tz-radius-md); padding: 12px 14px; color: var(--tz-text-primary);
  font-size: var(--tz-font-size-base); outline: none; transition: border-color .15s, box-shadow .15s;
}
.tzr-input:focus { border-color: var(--tz-accent); box-shadow: var(--tz-glow); }

.tzr-badge {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--tz-radius-pill);
  font-size: var(--tz-font-size-xs); font-weight: 700;
  background: var(--tz-accent-muted); color: var(--tz-accent);
}
.tzr-badge--up { background: var(--tz-success-muted); color: var(--tz-success); }
.tzr-badge--down { background: var(--tz-danger-muted); color: var(--tz-danger); }

.tzr-table { width: 100%; border-collapse: collapse; }
.tzr-table th { text-align: left; color: var(--tz-text-muted); font-size: var(--tz-font-size-xs);
  text-transform: uppercase; letter-spacing: .05em; padding: 10px 14px; border-bottom: 1px solid var(--tz-border); font-weight: 600; }
.tzr-table td { padding: 13px 14px; border-bottom: 1px solid var(--tz-border-light); color: var(--tz-text-body); font-size: var(--tz-font-size-md); }
.tzr-table tr:hover td { background: var(--tz-bg-hover); }

.tzr-num { font-family: var(--tz-font-mono); }