/* === Merchant Abacus Design Tokens v4.0 === */
/* Modern dark theme with vibrant accents */

:root {
  /* ── Background hierarchy ── */
  --bg-primary: #0f1419;
  --bg-surface: #161b22;
  --bg-elevated: #1c2128;
  --bg-hover: #262c36;
  --bg-glass: rgba(22, 27, 34, 0.85);

  /* ── Primary accent (Neon Green) ── */
  --accent: #00ff88;
  --accent-dim: rgba(0, 255, 136, 0.15);
  --accent-glow: rgba(0, 255, 136, 0.3);
  --accent-hover: #33ffaa;
  --accent-active: #00dd77;

  /* ── Secondary accent (Cyan) ── */
  --cyan: #00d4ff;
  --cyan-dim: rgba(0, 212, 255, 0.15);
  --cyan-glow: rgba(0, 212, 255, 0.3);

  /* ── Semantic colors ── */
  --gold: #ffd700;
  --gold-dim: rgba(255, 215, 0, 0.15);
  --red: #ff4757;
  --red-dim: rgba(255, 71, 87, 0.15);
  --blue: #4dabf7;
  --blue-dim: rgba(77, 171, 247, 0.15);
  --green: #51cf66;
  --green-dim: rgba(81, 207, 102, 0.15);
  --purple: #9775fa;
  --purple-dim: rgba(151, 117, 250, 0.15);
  --orange: #ff922b;
  --orange-dim: rgba(255, 146, 43, 0.15);

  /* ── Text hierarchy ── */
  --text-primary: #ffffff;
  --text-secondary: #b8b8c8;
  --text-tertiary: #686880;
  --text-disabled: #45455a;

  /* ── Border system ── */
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.15);
  --border-accent: rgba(0, 255, 136, 0.3);
  --border-glow: 0 0 0 1px var(--accent), 0 0 15px var(--accent-glow);

  /* ── Gradients ── */
  --gradient-accent: linear-gradient(135deg, #00ff88 0%, #00dd77 100%);
  --gradient-surface: linear-gradient(180deg, #1a1a25 0%, #12121a 100%);
  --gradient-glow: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 70%);
  --gradient-card: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);

  /* ── Shadows ── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-accent: 0 0 20px var(--accent-glow);
  --shadow-glow: 0 0 40px var(--accent-glow);

  /* ── Spacing scale ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 48px;

  /* ── Radius ── */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ── Typography ── */
  --font-family: 'Inter', 'SF Pro Display', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;

  /* ── Transitions ── */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ── Z-index layers ── */
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-modal: 150;
  --z-toast: 200;
  --z-tooltip: 250;
}