/* ============================================================
   Dango Bot — Design System
   Drop this file at the root of your Vite/React app and import
   it once in main.jsx:  import './theme.css'
   ============================================================ */

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

:root {
  /* ---- Color system ---- */
  --db-bg:          #0D1117;   /* app background */
  --db-bg-2:        #0a0e14;   /* deeper: behind panels */
  --db-panel:       rgba(255, 255, 255, 0.03);   /* glass panel */
  --db-panel-solid: #10161f;   /* solid panel (tables, logs) */
  --db-border:      rgba(255, 255, 255, 0.08);
  --db-border-strong: rgba(255, 255, 255, 0.14);

  --db-text:        #E6EDF3;   /* primary text */
  --db-text-dim:    #8B949E;   /* secondary text */
  --db-text-faint:  #6E7681;   /* tertiary / metadata */

  /* Accents — use sparingly */
  --db-green:       #3FB950;   /* positive / action / live */
  --db-green-dim:   rgba(63, 185, 80, 0.20);
  --db-green-faint: rgba(63, 185, 80, 0.08);
  --db-blue:        #58A6FF;   /* data / neutral highlight */
  --db-blue-dim:    rgba(88, 166, 255, 0.20);

  /* Semantic — reserve warnings for truly bad states only */
  --db-amber:       #D29922;   /* caution (drawdown brake, etc) */
  --db-red:         #F85149;   /* stop / critical only */

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

  /* Type scale */
  --db-text-xs:  11px;
  --db-text-sm:  12px;
  --db-text-md:  13px;
  --db-text-lg:  15px;
  --db-text-xl:  18px;
  --db-text-2xl: 22px;
  --db-text-3xl: 28px;

  /* ---- Spacing (8pt system) ---- */
  --db-space-1: 4px;
  --db-space-2: 8px;
  --db-space-3: 12px;
  --db-space-4: 16px;
  --db-space-5: 20px;
  --db-space-6: 24px;
  --db-space-8: 32px;

  /* ---- Radii & shadow ---- */
  --db-radius-sm: 4px;
  --db-radius-md: 6px;
  --db-radius-lg: 10px;
  --db-shadow-panel: 0 8px 24px rgba(0, 0, 0, 0.35);
  --db-shadow-glow:  0 0 24px rgba(63, 185, 80, 0.25);

  /* ---- Motion ---- */
  --db-ease:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --db-dur-fast: 160ms;
  --db-dur-med:  280ms;
}

/* ============================================================
   Global resets / base
   ============================================================ */
html, body {
  background: var(--db-bg);
  color: var(--db-text);
  font-family: var(--db-font-sans);
  font-size: var(--db-text-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--db-green); color: var(--db-bg); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(63, 185, 80, 0.04); }
::-webkit-scrollbar-thumb { background: var(--db-green-dim); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--db-green); }

.mono  { font-family: var(--db-font-mono); font-variant-numeric: tabular-nums; }
.eyebrow {
  font-family: var(--db-font-mono);
  font-size: var(--db-text-xs);
  color: var(--db-green);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ============================================================
   Panels — use for every card / container in the dashboard
   ============================================================ */
.db-panel {
  background: var(--db-panel-solid);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius-lg);
  box-shadow: var(--db-shadow-panel);
  overflow: hidden;
}
.db-panel--glass {
  background: var(--db-panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.db-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--db-border);
  font-family: var(--db-font-mono);
  font-size: var(--db-text-xs);
  color: var(--db-text-dim);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.db-panel__head .title { color: var(--db-green); }

/* ============================================================
   Buttons — replaces the mixed red/green/purple/orange set
   Rule: one primary green. Everything else is ghost or tonal.
   ============================================================ */
.db-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-family: var(--db-font-sans);
  font-size: var(--db-text-md);
  font-weight: 500;
  border-radius: var(--db-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--db-dur-fast) var(--db-ease);
}
.db-btn--primary {
  background: var(--db-green);
  color: #052e0a;
}
.db-btn--primary:hover { box-shadow: var(--db-shadow-glow); }

.db-btn--ghost {
  background: transparent;
  color: var(--db-text);
  border-color: var(--db-border-strong);
}
.db-btn--ghost:hover {
  border-color: var(--db-green);
  color: var(--db-green);
  background: var(--db-green-faint);
}

/* Stop / critical — reserve for engine-stop only */
.db-btn--danger {
  background: transparent;
  color: var(--db-red);
  border-color: rgba(248, 81, 73, 0.4);
}
.db-btn--danger:hover {
  background: rgba(248, 81, 73, 0.08);
  border-color: var(--db-red);
}

/* ============================================================
   Status pills & dots
   ============================================================ */
.db-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--db-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--db-border);
  color: var(--db-text-dim);
}
.db-pill--live   { color: var(--db-green); border-color: var(--db-green-dim); }
.db-pill--data   { color: var(--db-blue);  border-color: var(--db-blue-dim); }
.db-pill--warn   { color: var(--db-amber); border-color: rgba(210, 153, 34, 0.35); }

.db-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  animation: dbPulse 1.5s ease-in-out infinite;
}
@keyframes dbPulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.3); opacity: 0.6; }
}

/* ============================================================
   Numbers — the soul of a trading UI
   ============================================================ */
.db-num      { font-family: var(--db-font-mono); font-variant-numeric: tabular-nums; }
.db-num--pos { color: var(--db-green); }
.db-num--neg { color: var(--db-blue); }    /* blue, not red — matches landing */
.db-num--big { font-size: var(--db-text-2xl); font-weight: 500; letter-spacing: -0.01em; }

/* ============================================================
   Tables (positions, history, etc)
   ============================================================ */
.db-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--db-font-mono);
  font-size: var(--db-text-sm);
}
.db-table th {
  text-align: left;
  padding: 8px 12px;
  color: var(--db-text-faint);
  font-weight: 400;
  font-size: var(--db-text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--db-border);
}
.db-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--db-border);
  color: var(--db-text);
}
.db-table tbody tr:hover { background: var(--db-green-faint); }

/* ============================================================
   Log viewer (server log) — mono, dense, with syntax colors
   ============================================================ */
.db-log {
  font-family: var(--db-font-mono);
  font-size: var(--db-text-sm);
  line-height: 1.55;
  padding: 12px 14px;
  background: var(--db-bg-2);
  color: var(--db-text-dim);
  white-space: pre-wrap;
  overflow-y: auto;
}
.db-log .t { color: var(--db-text-faint); }        /* timestamp */
.db-log .s { color: var(--db-blue); }              /* source [StrategySelector] */
.db-log .k { color: var(--db-green); }             /* keyword / pass */
.db-log .n { color: var(--db-text); }              /* number / symbol */
.db-log .w { color: var(--db-amber); }             /* warning */