/* ============================================
   variables.css — Design Tokens
   Guangxuan Fasteners
   ============================================ */

:root {
  /* Blue scale — one hue, all shades */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;

  /* Text */
  --text-primary:   #111827;
  --text-secondary: #6B7280;
  --text-muted:     #9CA3AF;

  /* Layout */
  --topbar-height: 56px;

  /* Shape */
  --radius-card:  16px;
  --radius-btn:   9999px;
  --radius-input: 8px;
  --radius-icon:  10px;

  /* Border */
  --border-w: 2px;

  /* Shadows */
  --shadow-card:   0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-hover:  0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-btn:    0 6px 20px rgba(0, 0, 0, 0.15);
  --shadow-hero:   0 8px 24px rgba(0, 0, 0, 0.15);

  /* Spacing scale (4px base) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Typography */
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}