/**
 * ZebraDex Design System — Tokens
 * CSS Custom Properties + Base Styles
 * Theme: Holo Collector (B)
 */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
  /* Backgrounds (Binance-inspired) */
  --zbd-bg: #0B0E11;
  --zbd-surface-1: #1E2026;
  --zbd-surface-2: #2B2F36;
  
  /* Borders */
  --zbd-border: #2B2F36;
  --zbd-border-light: #3C4043;
  
  /* Text */
  --zbd-text-primary: #F0F6FC;
  --zbd-text-muted: #8B949E;
  
  /* Accent (Binance-style Gold) */
  --zbd-accent: #F0B90B;
  --zbd-accent-hover: #D9A80B;
  --zbd-accent-secondary: #58A6FF;
  
  /* Semantic Colors (Finance) */
  --zbd-success: #3FB950;
  --zbd-success-bg: rgba(63, 185, 80, 0.15);
  --zbd-danger: #F85149;
  --zbd-danger-bg: rgba(248, 81, 73, 0.15);
  --zbd-warning: #D29922;
  --zbd-warning-bg: rgba(210, 153, 34, 0.15);
  --zbd-info: #A371F7;
  --zbd-info-bg: rgba(163, 113, 247, 0.15);
  
  /* Radius */
  --zbd-radius-sm: 6px;
  --zbd-radius-md: 10px;
  --zbd-radius-lg: 14px;
  --zbd-radius-pill: 999px;
  
  /* Shadows */
  --zbd-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --zbd-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --zbd-shadow-glow: 0 0 20px rgba(88, 166, 255, 0.3);
  
  /* Transitions */
  --zbd-transition-fast: 0.15s ease;
  --zbd-transition-normal: 0.25s ease;
  
  /* Touch targets */
  --zbd-touch-min: 44px;
  
  /* Typography */
  --zbd-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --zbd-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}


/* ============================================================
   TYPOGRAPHY BASE
   ============================================================ */

.styleguide-container {
  font-family: var(--zbd-font-sans);
  letter-spacing: -0.01em;
}

.styleguide-container h1,
.styleguide-container h2,
.styleguide-container h3,
.styleguide-container h4,
.styleguide-container h5,
.styleguide-container h6 {
  font-family: var(--zbd-font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.styleguide-container .sg-kpi-value,
.styleguide-container .zbd-hero-kpi-value {
  font-weight: 700;
  letter-spacing: -0.03em;
}

.styleguide-container code {
  font-family: var(--zbd-font-mono);
  font-size: 0.85em;
}


/* ============================================================
   STYLEGUIDE LAYOUT
   ============================================================ */

.styleguide-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.sg-hero { border-bottom: 1px solid var(--zbd-border); }

.sg-section {
  padding-top: 2rem;
  border-top: 1px solid var(--zbd-border);
}

.sg-section-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--zbd-text-primary);
}

.sg-subsection-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--zbd-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.sg-card {
  background: var(--zbd-surface-1);
  border: 1px solid var(--zbd-border);
  border-radius: var(--zbd-radius-lg);
  padding: 1.5rem;
}

.sg-card--dense {
  background: #0A0A0A;
  border-color: #1F1F1F;
  border-radius: var(--zbd-radius-sm);
}

.sg-footer { border-top: 1px solid var(--zbd-border); }

.sg-section--dense {
  background: #050505;
  margin-left: -1rem;
  margin-right: -1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 2rem;
  border-color: #1F1F1F;
}


/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.sg-tabular-nums { font-variant-numeric: tabular-nums; }

.bg-zbd-accent { background: var(--zbd-accent) !important; }
.bg-zbd-surface-2 { background: var(--zbd-surface-2) !important; }
.bg-zbd-success { background: var(--zbd-success) !important; }


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 767.98px) {
  .sg-section-title { font-size: 1.5rem; }
  .sg-card { padding: 1rem; }
}