/**
 * Dashboard design tokens — Temto vibe: vibrant accents, visible texture
 * Deep slate base with poppier blues, greens, and reds.
 */
:root {
  /* Deep slate/charcoal base */
  --dash-bg: #000000;
  --dash-bg-main: #000000;
  /* Sidebar rail — TradingView-adjacent: deep panel, muted items, crisp accent */
  --dash-sidebar-bg: #0B0E14;
  --dash-sidebar-border: #1E222D;
  --dash-sidebar-item: #9CA3B4;
  --dash-sidebar-link: #5E88FF;
  --dash-sidebar-link-bg: rgba(255, 255, 255, 0.055);
  --dash-sidebar-link-bg-hover: rgba(255, 255, 255, 0.075);
  --dash-sidebar-link-radius: 4px;
  /* Logo + footer reserved height for nav max-height (scroll when many links) */
  --dash-sidebar-logo-chrome: 84px;
  --dash-sidebar-footer-chrome: 212px;

  /* Borders — slightly more visible for definition */
  --dash-border: #294884;
  --dash-card-border: #252A38;
  --dash-kpi-border: #252A38;

  /*
   * Markets view-tabs + Market Overall + dashboard KPI cards (same visual system).
   * mirrors markets.css :root --mk-card-bg / --mk-card-border; .view-tab.active / :hover
   */
  --dash-market-card-bg: #000000;
  --dash-market-card-border: var(--dash-border);
  /* Selected tab / navy tint (same as .view-tab.active background) */
  --dash-market-card-bg-active: rgba(41, 72, 132, 0.35);
  --dash-market-card-shadow-active: 0 0 12px rgba(41, 72, 132, 0.25);
  /* Hover border (same as .view-tab:hover:not(.active)) */
  --dash-market-card-border-hover: #3fa9f5;
  --dash-market-card-shadow-hover: 0 0 14px rgba(63, 169, 245, 0.22);
  /* Desktop: Markets .view-tab + Market Overall + dashboard KPI (same fixed row height) */
  --dash-kpi-view-height: 110px;
  /*
   * Mobile / tablet KPI — match Markets .view-tab min-heights (markets.css):
   * ≤1024 & ≤480 → 44px; ≤360 → 40px; ≤320 (mobile-compat) → 38px
   */
  --dash-kpi-mobile-height: 44px;
  --dash-kpi-mobile-height-xs: 40px;
  --dash-kpi-mobile-height-fold: 38px;

  /*
   * Dashboard KPI row (Strategy / Mode / Active coins / Signals) — same shell as
   * Markets .funding-card + .heatmap-cell gloss; border matches .coin-card / tabs.
   */
  --dash-kpi-surface-bg: rgba(19, 36, 71, 0.3); /* #1324474D — funding-card; KPI hover fill */
  --dash-kpi-surface-border: var(--dash-border); /* #294884 — KPI resting + hover border */
  --dash-kpi-sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, transparent 50%);
  /* Legacy brighter hover (Markets/tabs may still reference) */
  --dash-kpi-hover-bg: rgba(41, 72, 132, 0.42);
  --dash-kpi-hover-border: rgba(63, 169, 245, 0.35);
  --dash-kpi-hover-glow: 0 4px 18px rgba(63, 169, 245, 0.14);

  /* Glassmorphism cards */
  --dash-card-bg: rgba(255, 255, 255, 0.04);
  --dash-card-bg-blue: #29488459; /* rgba(41, 72, 132, 0.35) */
  --dash-section-card-bg: rgba(255, 255, 255, 0.04);

  /* Nav icon filter: hover/active = #5E88FF (same as sidebar link) */
  --dash-nav-icon-active-filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(213deg) brightness(98%) contrast(101%);

  /* Focus ring */
  --dash-focus-ring: rgba(99, 102, 241, 0.5);

  /* Text — slightly brighter for pop */
  --dash-text: #F2F4F8;
  --dash-text-muted: #9CA3B4;
  --dash-text-dim: #6B7280;

  /* Dashboard page title (gradient or single color) */
  --dash-title-color: #F2F4F8;
  --dash-title-gradient-start: #38bdf8;
  --dash-title-gradient-mid: #60a5fa;
  --dash-title-gradient-end: #a78bfa;

  /* Trading colors — more vivid (Temto green / red) */
  --dash-gain: #2EBD85;
  --dash-gain-neon: #2EBD85;
  --dash-loss: #F6465D;
  --dash-loss-coral: #F6465D;
  --dash-buy: #00ff88;
  --dash-sell: #F6465D;

  /* Temto accent — punchier blue–violet */
  --dash-accent: #818cf8;
  --dash-accent-soft: rgba(129, 140, 248, 0.25);

  /* Legacy aliases — more saturated */
  --dash-link: #818cf8;
  --dash-blue: #60a5fa;
  --dash-blue-bright: #2F9EEF;
  --dash-yellow: #fcd34d;
  --dash-purple: #a78bfa;
  --dash-green: #2EBD85;
  --dash-green-muted: rgba(46, 189, 133, 0.5);
  --dash-red: #F6465D;
  --dash-red-pink: #F6465D;
  --dash-orange: #fbbf24;

  /* Spacing — significant padding/whitespace for data to "breathe" */
  --dash-radius: 12px;
  --dash-radius-sm: 10px;
  --dash-gap: 28px;
  --dash-gap-sm: 18px;
  --dash-pad: 28px;
  --dash-pad-sm: 20px;

  /* Typography — Google Sans like other pages, + Monospace for numbers */
  --dash-font: 'Google Sans', 'Google Sans Flex', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --dash-font-display: 'Google Sans', 'Google Sans Flex', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --dash-font-mono: 'Roboto Mono', 'SF Mono', 'Consolas', 'Monaco', monospace;

  /* Animation — consistent duration/easing for polish and performance */
  --dash-transition: 200ms ease-in-out;
  --dash-transition-fast: 150ms ease-out;
}