/* ==============================================
   DESIGN TOKENS - Binance-style Dark Theme
   ============================================== */

:root {
  /* Primary Background Colors */
  --bg-primary: #060910;
  --bg-secondary: #0a0e1a;
  --bg-elevated: #0d1424;
  --bg-hover: #111827;

  /* Accent Colors - Cyan Theme */
  --accent-primary: #00d4ff;
  --accent-hover: #00a3cc;
  --accent-muted: rgba(0, 212, 255, 0.1);

  /* Semantic Colors */
  --color-profit: #00ff9d;
  --color-profit-bg: rgba(0, 255, 157, 0.1);
  --color-loss: #ff3d6b;
  --color-loss-bg: rgba(255, 61, 107, 0.1);
  --color-warning: #f59e0b;
  --color-warning-bg: rgba(245, 158, 11, 0.1);
  --color-info: #00d4ff;
  --color-info-bg: rgba(0, 212, 255, 0.1);
  --color-purple: #8b5cf6;
  --color-purple-bg: rgba(139, 92, 246, 0.12);

  /* Text Colors */
  --text-primary: #e2e8f4;
  --text-secondary: #7a8fa8;
  --text-muted: #3f5068;
  --text-disabled: #2a3548;

  /* Border Colors */
  --border-primary: rgba(255, 255, 255, 0.06);
  --border-secondary: rgba(255, 255, 255, 0.11);
  --border-accent: #00d4ff;

  /* Typography */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Font Sizes */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 24px;
  --text-3xl: 32px;

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

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

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

  /* Layout */
  --sidebar-width: 220px;
  --sidebar-collapsed-width: 56px;
  --header-height: 60px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.6);

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

  /* Z-Index */
  --z-dropdown: 100;
  --z-modal-backdrop: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-tooltip: 500;
}

/* Touch & iOS */
@supports (padding: max(0px)) {
  .header {
    padding-left: max(var(--space-lg), env(safe-area-inset-left));
    padding-right: max(var(--space-lg), env(safe-area-inset-right));
  }

  .main-content {
    padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom));
  }

  .sidebar {
    padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
  }
}

/* Tap highlight: remove blue flash on mobile */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--bg-elevated);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-secondary);
}