/* ================================================================
   Linda's English Hub — 全局设计系统
   
   颜色方案：玫红色系 (Rose / Berry Pink)
   字体：Inter（英文）+ Noto Sans SC（中文）
   响应式断点：≥1024px 桌面 / 768-1023px 平板 / <768px 手机
   ================================================================ */

/* ---------- CSS 变量（设计令牌）---------- */
:root {
  /* === 玫红色系主色 === */
  --color-primary:       #D4537E;
  --color-primary-dark:  #993556;
  --color-primary-light: #FBEAF0;
  --color-primary-xlight:#FFF8FA;

  /* === 中性色 === */
  --color-bg:            #FFF8FA;
  --color-surface:       #FFFFFF;
  --color-border:        #F4C0D1;
  --color-border-light:  #FDE4ED;

  /* === 文字颜色 === */
  --color-text-main:     #2C1520;
  --color-text-secondary:#6B3950;
  --color-text-muted:    #A87B90;
  --color-text-white:    #FFFFFF;

  /* === 功能色 === */
  --color-success:       #2D9A6A;
  --color-success-light: #E8F5EF;
  --color-warning:       #E08A2A;
  --color-warning-light: #FEF3E4;
  --color-error:         #D64040;
  --color-error-light:   #FDEAEA;
  --color-info:          #4A90D9;
  --color-info-light:    #EAF2FC;

  /* === 字体 === */
  --font-sans:           -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono:           'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* === 字号 === */
  --text-xs:             0.75rem;   /* 12px */
  --text-sm:             0.875rem;  /* 14px */
  --text-base:           1rem;      /* 16px */
  --text-lg:             1.125rem;  /* 18px */
  --text-xl:             1.25rem;   /* 20px */
  --text-2xl:            1.5rem;    /* 24px */
  --text-3xl:            1.875rem;  /* 30px */
  --text-4xl:            2.25rem;   /* 36px */
  --text-5xl:            3rem;      /* 48px */

  /* === 字重 === */
  --weight-normal:       400;
  --weight-medium:       500;
  --weight-semibold:     600;
  --weight-bold:         700;
  --weight-extrabold:    800;

  /* === 行高 === */
  --leading-tight:       1.25;
  --leading-normal:      1.6;
  --leading-relaxed:     1.75;

  /* === 间距 === */
  --spacing-xs:          0.25rem;   /* 4px */
  --spacing-sm:          0.5rem;    /* 8px */
  --spacing-md:          1rem;      /* 16px */
  --spacing-lg:          1.5rem;    /* 24px */
  --spacing-xl:          2rem;      /* 32px */
  --spacing-2xl:         3rem;      /* 48px */
  --spacing-3xl:         4rem;      /* 64px */

  /* === 圆角 === */
  --radius-sm:           0.375rem;  /* 6px */
  --radius-md:           0.5rem;    /* 8px */
  --radius-lg:           0.75rem;   /* 12px */
  --radius-xl:           1rem;      /* 16px */
  --radius-full:         9999px;

  /* === 阴影 === */
  --shadow-sm:           0 1px 2px rgba(153, 53, 86, 0.06);
  --shadow-md:           0 4px 6px rgba(153, 53, 86, 0.08);
  --shadow-lg:           0 10px 25px rgba(153, 53, 86, 0.10);
  --shadow-xl:           0 20px 50px rgba(153, 53, 86, 0.12);

  /* === 过渡 === */
  --transition-fast:     0.15s ease;
  --transition-base:     0.25s ease;
  --transition-slow:     0.4s ease;

  /* === 布局 === */
  --content-max-width:   1200px;
  --header-height:       64px;

  /* === Z-index === */
  --z-dropdown:          100;
  --z-sticky:            200;
  --z-overlay:           300;
  --z-modal:             400;
}

/* ================================================================
   Reset & Normalize
   ================================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-main);
  background-color: var(--color-bg);
  overflow-x: hidden;
  min-height: 100vh;
}

/* 补偿固定 header 的高度 */
body.has-sticky-header {
  padding-top: var(--header-height);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--color-primary-dark);
}

ul, ol {
  list-style: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* ---------- 容器 ---------- */
.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

/* ---------- 页面区块通用间距 ---------- */
.section {
  padding: var(--spacing-3xl) 0;
}

.section-sm {
  padding: var(--spacing-2xl) 0;
}

.section-header {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.section-title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-main);
  margin-bottom: var(--spacing-sm);
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

/* ---------- 工具类 ---------- */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-muted  { color: var(--color-text-muted); }
.text-small  { font-size: var(--text-sm); }
.text-xs     { font-size: var(--text-xs); }

.font-bold    { font-weight: var(--weight-bold); }
.font-semibold{ font-weight: var(--weight-semibold); }

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.hidden     { display: none !important; }
.sr-only    {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* ---------- 网格系统辅助 ---------- */
.grid { display: grid; gap: var(--spacing-lg); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- 加载动画 ---------- */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-3xl);
  flex-direction: column;
  gap: var(--spacing-md);
  color: var(--color-text-muted);
}

/* ---------- 淡入动画 ---------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeInUp 0.5s ease forwards;
}

/* ================================================================
   响应式设置
   ================================================================ */

/* 平板及以下 */
@media (max-width: 1023px) {
  :root {
    --header-height: 56px;
  }
  .grid-3, .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .section {
    padding: var(--spacing-2xl) 0;
  }
}

/* 手机 */
@media (max-width: 767px) {
  :root {
    --header-height: 52px;
  }
  .container {
    padding: 0 var(--spacing-md);
  }
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }
  .section-title {
    font-size: var(--text-2xl);
  }
  .section {
    padding: var(--spacing-xl) 0;
  }
  body.has-sticky-header {
    padding-top: var(--header-height);
  }
}