/* Eisphora Design System
 * Premium, professional, dark-first.
 * Inspired by TradingView's clarity + a single electric accent.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Geist:wght@400;500;600;700;800;900&display=swap');

:root {
  /* === Brand color (signature green like a positive delta) === */
  --brand-500: #00E599;       /* primary accent */
  --brand-400: #38F2B0;
  --brand-600: #00B97A;
  --brand-700: #008E5C;
  --brand-glow: rgba(0, 229, 153, 0.25);

  /* Bid/Ask trading pair */
  --bid: #00E599;             /* green */
  --ask: #FF4D6A;             /* red */
  --warn: #FFB020;
  --info: #4D9CFF;

  /* === Neutrals (TradingView-style deep dark) === */
  --bg-0: #000000;            /* page bg */
  --bg-1: #0A0A0A;            /* cards / surfaces */
  --bg-2: #111111;            /* elevated */
  --bg-3: #1A1A1A;            /* hover */
  --bg-4: #242424;            /* borders strong */

  --line-1: rgba(255,255,255,0.07);
  --line-2: rgba(255,255,255,0.11);
  --line-3: rgba(255,255,255,0.18);

  --fg-0: #FFFFFF;
  --fg-1: #FFFFFF;
  --fg-2: rgba(255,255,255,0.65);
  --fg-3: rgba(255,255,255,0.35);
  --fg-4: rgba(255,255,255,0.2);

  /* === Typography === */
  --font-display: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-text: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* === Radii === */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;

  /* === Shadows === */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.6);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.45);
  --shadow-3: 0 1px 0 rgba(255,255,255,0.05) inset, 0 24px 60px rgba(0,0,0,0.55);
  --shadow-glow: 0 0 0 1px rgba(0,229,153,0.35), 0 0 40px rgba(0,229,153,0.18);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}

/* Typography roles */
.t-display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.t-mono {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum';
}

.tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--bg-4); }