/* 全面的CSS变量系统 */
:root {
  /* 渐变色变量 */
  --gradient-pink: #f093fb;
  --gradient-blue: #667eea;
  --gradient-purple: #764ba2;
  --gradient-teal: #44a08d;
  --gradient-brown: #8d6e63;
  --gradient-light-pink: #fecfef;
  --gradient-coral: #ff9a9e;
  --gradient-mint: #a8edea;
  --gradient-rose: #fed6e3;
  --gradient-mauve: #d299c2;
  --gradient-cream: #ffecd2;
  --gradient-peach: #fcb69f;
  --gradient-slate: #667db6;
  --gradient-ocean: #0082c8;
  --gradient-indigo: #667eea;
  --gradient-magenta: #f093fb;
  --gradient-yellow: #fee140;
  
  /* 主色调 */
  --primary-red: #ff6b6b;
  --primary-cyan: #4ecdc4;
  --primary-blue: #45b7d1;
  --primary-green: #96ceb4;
  --primary-yellow: #feca57;
  --primary-pink: #ff9ff3;
  
  /* 强调色 */
  --accent-blue: #54a0ff;
  --accent-purple: #5f27cd;
  --accent-teal: #00d2d3;
  --accent-orange: #ff9f43;
  --accent-red: #ee5a24;
  --accent-green: #10ac84;
  
  /* 基础色 */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-light: #f8f9fa;
  --color-dark: #343a40;
  --color-gray: #6c757d;
  
  /* Bootstrap兼容色 */
  --color-primary: #007bff;
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --color-info: #17a2b8;
  
  /* 渐变背景 */
  --bg-gradient-primary: linear-gradient(135deg, var(--gradient-blue), var(--gradient-purple));
  --bg-gradient-secondary: linear-gradient(135deg, var(--gradient-pink), var(--gradient-coral));
  --bg-gradient-success: linear-gradient(135deg, var(--gradient-teal), var(--gradient-mint));
  --bg-gradient-info: linear-gradient(135deg, var(--gradient-ocean), var(--gradient-slate));
  --bg-gradient-warning: linear-gradient(135deg, var(--gradient-cream), var(--gradient-peach));
  --bg-gradient-danger: linear-gradient(135deg, var(--gradient-coral), var(--gradient-rose));
  
  /* 阴影 */
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  
  /* 边框半径 */
  --border-radius: 0.375rem;
  --border-radius-sm: 0.25rem;
  --border-radius-lg: 0.5rem;
  --border-radius-xl: 1rem;
  
  /* 间距 */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 4.5rem;
}

/* 响应式容器类 */
.section-container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .section-container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .section-container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .section-container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .section-container {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .section-container {
    max-width: 1320px;
  }
}

/* Section通用样式 */
.section {
  padding: var(--spacing-xl) 0;
}

.section.bg-dark {
  background: var(--bg-gradient-primary);
  color: var(--color-white);
}

.section.bg-gradient {
  background: var(--bg-gradient-secondary);
  color: var(--color-white);
}

.hero {
  padding: var(--spacing-xxl) 0;
  background: var(--bg-gradient-primary);
  color: var(--color-white);
}

.cta-section {
  padding: var(--spacing-xl) 0;
  background: var(--bg-gradient-success);
  color: var(--color-white);
}

/* 响应式工具类 */
.d-flex { display: flex !important; }
.flex-column { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-center { align-items: center !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

/* 响应式显示类 */
@media (max-width: 575.98px) {
  .d-sm-none { display: none !important; }
  .d-sm-block { display: block !important; }
  .d-sm-flex { display: flex !important; }
}

@media (max-width: 767.98px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-flex { display: flex !important; }
}

@media (max-width: 991.98px) {
  .d-lg-none { display: none !important; }
  .d-lg-block { display: block !important; }
  .d-lg-flex { display: flex !important; }
}