/* ===================================
   🎨 CSS VARIABLES - แก้ที่นี่ที่เดียว ใช้ได้ทั้งเว็บ
   =================================== */

:root {
  /* Colors - สีหลักของเว็บ */
  --primary-color: #3498db;
  --secondary-color: #2d2d2d;
  --accent-color: #e74c3c;
  --text-color: #2d2d2d;
  --text-secondary: #4a4a4a;
  --background-color: #f9f9f9;
  --card-bg: #ffffff;
  --border-color: #e0e0e0;
  --shadow-color: rgba(0, 0, 0, 0.1);
  
  /* Spacing - ระยะห่าง */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 2rem;      /* 32px */
  --space-lg: 4rem;      /* 64px */
  --space-xl: 6rem;      /* 96px */
  
  /* Typography - ฟอนต์ */
  --font-main: 'Prompt', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-english: 'Prompt', 'Roboto', sans-serif;
  --font-size-base: 16px;
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-h1: 3rem;       /* 48px */
  --font-size-h2: 2.5rem;     /* 40px */
  --font-size-h3: 2rem;       /* 32px */
  --font-size-h4: 1.5rem;     /* 24px */
  
  /* Borders & Radius */
  --border-radius-sm: 5px;
  --border-radius: 8px;
  --border-radius-lg: 12px;
  --border-radius-full: 50%;
  
  /* Shadows */
  --box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  --box-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Z-index */
  --z-dropdown: 100;
  --z-header: 1000;
  --z-modal: 2000;
  --z-tooltip: 3000;
  
  /* Container */
  --container-width: 1200px;
  --container-padding: 25px;
}

/* ===================================
   🌙 DARK MODE - โหมดมืด
   =================================== */

[data-theme="dark"] {
  --primary-color: #3498db;
  --secondary-color: #f9f9f9;
  --accent-color: #e74c3c;
  --text-color: #f9f9f9;
  --text-secondary: #d0d0d0;
  --background-color: rgba(18, 18, 24, 0.9);
  --card-bg: rgba(30, 30, 40, 0.7);
  --border-color: #2c2c2c;
  --shadow-color: rgba(0, 0, 0, 0.5);
}

/* ===================================
   📱 RESPONSIVE BREAKPOINTS
   =================================== */

/* Mobile: < 768px */
/* Tablet: 768px - 991px */
/* Desktop: > 992px */