/* ═══════════════════════════════════════════════════════════════
   Panel Bazaar BD — Design System Variables
   A luxury dark marketplace aesthetic
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Core Palette ── */
  --bg-base: #06060f;
  --bg-surface: rgba(255, 255, 255, 0.028);
  --bg-elevated: rgba(255, 255, 255, 0.055);
  --bg-input: rgba(255, 255, 255, 0.04);
  --bg-skeleton-from: rgba(255, 255, 255, 0.03);
  --bg-skeleton-to: rgba(255, 255, 255, 0.07);

  /* ── Brand Colors ── */
  --violet: #7c3aed;
  --indigo: #4f46e5;
  --lavender: #a78bfa;
  --violet-glow: rgba(124, 58, 237, 0.15);
  --violet-border: rgba(139, 92, 246, 0.12);
  --violet-border-focus: rgba(139, 92, 246, 0.6);
  --violet-border-active: rgba(139, 92, 246, 0.3);

  /* ── Semantic Colors ── */
  --success: #10b981;
  --success-bg: rgba(16, 185, 129, 0.12);
  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.12);
  --danger: #ef4444;
  --danger-bg: rgba(239, 68, 68, 0.12);

  /* ── Text Colors ── */
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #475569;
  --text-price: #c4b5fd;
  --text-link: #a78bfa;

  /* ── Surface Highlights ── */
  --surface-top-edge: rgba(255, 255, 255, 0.06);
  --surface-border: rgba(139, 92, 246, 0.12);

  /* ── Gradients ── */
  --gradient-primary: linear-gradient(135deg, #7c3aed, #4f46e5);
  --gradient-hero: linear-gradient(135deg, #1a0a3e, #0f0a2e, #06060f);
  --gradient-glow: radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.2) 0%, transparent 70%);

  /* ── Spacing ── */
  --safe-top: 48px;
  --safe-bottom: 80px;
  --nav-height: 56px;
  --bottom-nav-height: 64px;
  --page-padding: 16px;
  --card-radius: 20px;
  --input-radius: 14px;
  --pill-radius: 100px;

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --transition-page: 280ms var(--ease-out);
  --transition-press: 80ms ease-in;
  --transition-release: 180ms ease-out;
  --transition-standard: 200ms ease;

  /* ── Typography ── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ── MFS Brand Colors ── */
  --bkash: #e2136e;
  --nagad: #f26522;
  --rocket: #8b2f87;

  /* ── Z-Index Scale ── */
  --z-base: 1;
  --z-sticky: 10;
  --z-modal-backdrop: 50;
  --z-modal: 60;
  --z-toast: 70;
  --z-splash: 100;
}