/* ============================================
   BASE STYLES - CSS Variables & Reset
   全局基础样式，应该在所有其他 CSS 文件之前加载
   ============================================ */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
  /* Brand Colors */
  --color-orange: #EA6B41;
  --color-white: #FFFDFC;
  --color-black: #020202;
  --color-yellow: #FFDA79;
  --color-yellow-light: #FFF0BF;
  --color-yellow-pale: #FFF4CF;
  --color-gray: #929292;
  --color-dark-gray: #444444;
  --color-bg-cream: #FFF1E8;
  
  /* Typography */
  --font-display: 'Baloo 2', cursive;
  --font-body: 'Nunito', sans-serif;
  
  /* Spacing - 响应式 */
  --container-width: 1280px;
  --page-padding: 80px;
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
  /* 使用 clip 替代 hidden，不会破坏 sticky 定位 */
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-white);
  color: var(--color-black);
  /* 使用 clip 替代 hidden，不会破坏 sticky 定位 */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   FONT LOADING - 防止字体闪烁
   ============================================ */
.fonts-loading {
  visibility: hidden;
}

.fonts-loaded {
  visibility: visible;
}

/* ============================================
   RESPONSIVE VARIABLES
   ============================================ */

/* Large Desktop (1440px+) */
@media (min-width: 1441px) {
  :root {
    --page-padding: 80px;
  }
}

/* Desktop (1280px - 1440px) */
@media (max-width: 1440px) {
  :root {
    --page-padding: 60px;
  }
}

/* Laptop (1024px - 1280px) */
@media (max-width: 1280px) {
  :root {
    --page-padding: 40px;
  }
}

/* Tablet Landscape (768px - 1024px) */
@media (max-width: 1024px) {
  :root {
    --page-padding: 40px;
  }
}

/* Tablet Portrait (600px - 768px) */
@media (max-width: 768px) {
  :root {
    --page-padding: 24px;
  }
}

/* Mobile Large (480px - 600px) */
@media (max-width: 600px) {
  :root {
    --page-padding: 20px;
  }
}

/* Mobile (max 480px) */
@media (max-width: 480px) {
  :root {
    --page-padding: 16px;
  }
}

/* Small Mobile (max 360px) */
@media (max-width: 360px) {
  :root {
    --page-padding: 12px;
  }
}

/* ============================================
   ACCESSIBILITY & PERFORMANCE
   ============================================ */

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print Styles - Base */
@media print {
  body {
    background: white;
    color: black;
  }
}