:root {
  /* ═══════════════════════════════════════════════════════════════════════════
     PRATHAM DHAN — UNIFIED TRADING UI DESIGN SYSTEM
     Professional, clean, sharp trading dashboard theme
     ═══════════════════════════════════════════════════════════════════════════ */

  /* ─── Background Colors ─── */
  --color-bg: #0a0e14;
  --color-bg-elevated: #0f1419;
  --color-bg-card: #141a22;
  --color-bg-card-hover: #1a222c;
  --color-bg-input: #0d1117;
  --color-bg-hover: rgba(255, 255, 255, 0.04);
  --color-bg-panel: #111820;

  /* ─── Border Colors ─── */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-light: rgba(255, 255, 255, 0.12);
  --color-border-strong: rgba(255, 255, 255, 0.18);

  /* ─── Text Colors ─── */
  --color-text: #e6edf3;
  --color-text-muted: #8b949e;
  --color-text-dimmed: #6e7681;
  --color-text-label: #7d8590;

  /* ─── Primary (Blue) ─── */
  --color-primary: #58a6ff;
  --color-primary-hover: #79b8ff;
  --color-primary-bg: rgba(88, 166, 255, 0.12);
  --color-primary-border: rgba(88, 166, 255, 0.40);

  /* ─── Success (Green - Profit) ─── */
  --color-success: #2ea96c;
  --color-success-bright: #56d364;
  --color-success-bg: rgba(63, 185, 80, 0.15);
  --color-success-border: rgba(63, 185, 80, 0.40);

  /* ─── Danger (Red - Loss) ─── */
  --color-danger: #d4503a;
  --color-danger-bright: #ff7b72;
  --color-danger-bg: rgba(248, 81, 73, 0.15);
  --color-danger-border: rgba(248, 81, 73, 0.40);

  /* ─── Warning (Amber) ─── */
  --color-warning: #d29922;
  --color-warning-bright: #e3b341;
  --color-warning-bg: rgba(210, 153, 34, 0.15);
  --color-warning-border: rgba(210, 153, 34, 0.40);

  /* ─── Neutral (Gray) ─── */
  --color-neutral: #8b949e;
  --color-neutral-bg: rgba(139, 148, 158, 0.12);
  --color-neutral-border: rgba(139, 148, 158, 0.30);

  /* ─── Typography ─── */
  --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", Consolas, monospace;

  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 22px;
  --font-size-3xl: 28px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

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

  /* ─── Border Radius ─── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;

  /* ─── Shadows ─── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-glow-success: 0 0 20px rgba(63, 185, 80, 0.25);
  --shadow-glow-danger: 0 0 20px rgba(248, 81, 73, 0.25);

  /* ─── Transitions ─── */
  --transition-fast: 0.12s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NUMBER STYLING — Critical for trading dashboards
   ═══════════════════════════════════════════════════════════════════════════ */

.num, .mono, [data-num] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.num-lg {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.num-xl {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
}

/* PnL Colors */
.pnl-positive, .profit { color: var(--color-success-bright); }
.pnl-negative, .loss { color: var(--color-danger-bright); }
.pnl-zero, .flat { color: var(--color-text-muted); }

/* Price styling */
.price {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
}

.price-up { color: var(--color-success); }
.price-down { color: var(--color-danger); }

[data-theme="light"] {
  --color-bg: #f5f6f8;
  --color-bg-elevated: #ffffff;
  --color-bg-card: #ffffff;
  --color-bg-card-hover: #f8f9fa;
  --color-bg-input: #f0f1f3;
  --color-bg-hover: rgba(0, 0, 0, 0.04);
  --color-bg-panel: #ffffff;

  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-light: rgba(0, 0, 0, 0.12);
  --color-border-strong: rgba(0, 0, 0, 0.18);

  --color-text: #1a1d23;
  --color-text-muted: #6b7280;
  --color-text-dimmed: #9ca3af;
  --color-text-label: #6b7280;

  --color-primary: #3b6de8;
  --color-primary-hover: #2d5fcf;
  --color-primary-bg: rgba(59, 109, 232, 0.1);
  --color-primary-border: rgba(59, 109, 232, 0.35);

  --color-success-bg: rgba(46, 169, 108, 0.1);
  --color-success-border: rgba(46, 169, 108, 0.3);
  --color-danger-bg: rgba(212, 80, 58, 0.1);
  --color-danger-border: rgba(212, 80, 58, 0.3);
  --color-warning-bg: rgba(210, 153, 34, 0.1);
  --color-warning-border: rgba(210, 153, 34, 0.3);
  --color-neutral-bg: rgba(107, 114, 128, 0.08);
  --color-neutral-border: rgba(107, 114, 128, 0.2);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-glow-success: 0 0 12px rgba(46, 169, 108, 0.15);
  --shadow-glow-danger: 0 0 12px rgba(212, 80, 58, 0.15);
}