/* ============================================
   BLOG VARIABLES
   All CSS variables for the blog system
   ============================================ */

:root {
  /* ========== COLORS ========== */
  --blog-primary: #000000;
  --blog-secondary: #FFFFFF;
  --blog-accent: #0066CC;
  
  /* Grayscale */
  --blog-gray-50: #F8F9FA;
  --blog-gray-100: #E9ECEF;
  --blog-gray-200: #DEE2E6;
  --blog-gray-300: #CED4DA;
  --blog-gray-400: #ADB5BD;
  --blog-gray-500: #6C757D;
  --blog-gray-600: #495057;
  --blog-gray-700: #343A40;
  --blog-gray-800: #212529;
  
  /* Semantic Colors */
  --blog-success: #10B981;
  --blog-warning: #F59E0B;
  --blog-danger: #EF4444;
  --blog-info: #3B82F6;
  
  /* ========== TYPOGRAPHY ========== */
  --blog-font-heading: 'Poppins', sans-serif;
  --blog-font-body: 'Poppins', sans-serif;
  --blog-font-mono: 'Courier New', monospace;
  
  --blog-font-xs: 12px;
  --blog-font-sm: 14px;
  --blog-font-base: 16px;
  --blog-font-lg: 18px;
  --blog-font-xl: 20px;
  --blog-font-2xl: 24px;
  --blog-font-3xl: 30px;
  --blog-font-4xl: 36px;
  --blog-font-5xl: 48px;
  
  --blog-font-regular: 400;
  --blog-font-medium: 500;
  --blog-font-semibold: 600;
  --blog-font-bold: 700;
  
  --blog-line-height-normal: 1.6;
  --blog-line-height-relaxed: 1.8;
  
  /* ========== SPACING ========== */
  --blog-spacing-xs: 4px;
  --blog-spacing-sm: 8px;
  --blog-spacing-md: 16px;
  --blog-spacing-lg: 24px;
  --blog-spacing-xl: 32px;
  --blog-spacing-2xl: 48px;
  --blog-spacing-3xl: 64px;
  --blog-spacing-4xl: 96px;
  
  /* ========== BORDERS & SHADOWS ========== */
  --blog-border-radius-sm: 4px;
  --blog-border-radius-md: 8px;
  --blog-border-radius-lg: 12px;
  --blog-border-radius-full: 9999px;
  
  --blog-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --blog-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --blog-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --blog-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  
  /* ========== TRANSITIONS ========== */
  --blog-transition-fast: 0.15s ease-in-out;
  --blog-transition-base: 0.3s ease-in-out;
  --blog-transition-slow: 0.5s ease-in-out;
  
  /* ========== Z-INDEX ========== */
  --blog-z-sticky: 100;
  --blog-z-modal: 1000;
}