/* ===========================================
   语义化令牌系统 - 读书技巧导航页
   =========================================== */

:root {
  /* 基础语义化令牌 - HSL格式 */
  --primary: 220 91% 55%;           /* 蓝色 - 专业知识 */
  --primary-glow: 220 91% 75%;      /* 浅蓝 - 交互状态 */
  --accent: 40 100% 60%;            /* 橙色 - 行动号召 */
  --accent-glow: 40 100% 75%;       /* 浅橙 - 悬停状态 */
  --secondary: 210 15% 25%;         /* 深灰蓝 - 次要内容 */
  
  /* 中性色系统 */
  --neutral-50: 210 20% 98%;        /* 极浅灰 */
  --neutral-100: 210 15% 95%;       /* 浅灰背景 */
  --neutral-200: 210 10% 90%;       /* 边框灰 */
  --neutral-300: 210 10% 80%;       /* 分割线 */
  --neutral-700: 210 15% 35%;       /* 正文灰 */
  --neutral-800: 210 15% 25%;       /* 标题灰 */
  --neutral-900: 210 15% 15%;       /* 深色文本 */
  
  /* 功能性令牌 */
  --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
  --gradient-hero: linear-gradient(135deg, hsl(var(--primary) / 0.1), hsl(var(--accent) / 0.05));
  --shadow-glow: 0 0 40px hsl(var(--primary) / 0.3);
  --shadow-card: 0 4px 20px hsl(var(--neutral-900) / 0.1);
  --shadow-float: 0 8px 30px hsl(var(--neutral-900) / 0.15);
  
  /* 动画令牌 */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
  :root {
    --neutral-50: 210 15% 8%;
    --neutral-100: 210 15% 12%;
    --neutral-200: 210 10% 18%;
    --neutral-300: 210 10% 25%;
    --neutral-700: 210 15% 70%;
    --neutral-800: 210 15% 85%;
    --neutral-900: 210 15% 95%;
    
    --shadow-card: 0 4px 20px hsl(var(--neutral-900) / 0.2);
    --shadow-float: 0 8px 30px hsl(var(--neutral-900) / 0.3);
  }
}

/* CSS重置与基础样式 */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  line-height: 1.6;
  color: hsl(var(--neutral-800));
  background-color: hsl(var(--neutral-50));
  font-size: 16px; /* 移动端最小字体，防止缩放 */
}

/* 响应式字体系统 */
.text-xs { font-size: 0.75rem; line-height: 1rem; }      /* 12px */
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }  /* 14px */
.text-base { font-size: 1rem; line-height: 1.5rem; }     /* 16px */
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }  /* 18px */
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }   /* 20px */
.text-2xl { font-size: 1.5rem; line-height: 2rem; }      /* 24px */
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; } /* 30px */
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }   /* 36px */

/* 桌面端字体扩展 */
@media (min-width: 768px) {
  .text-lg { font-size: 1.25rem; line-height: 1.75rem; }   /* 20px */
  .text-xl { font-size: 1.5rem; line-height: 2rem; }       /* 24px */
  .text-2xl { font-size: 2rem; line-height: 2.5rem; }      /* 32px */
  .text-3xl { font-size: 2.5rem; line-height: 3rem; }      /* 40px */
  .text-4xl { font-size: 3rem; line-height: 3.5rem; }      /* 48px */
}

/* 间距系统 (8px基准) */
.gap-1 { gap: 0.25rem; }  /* 4px */
.gap-2 { gap: 0.5rem; }   /* 8px */
.gap-3 { gap: 0.75rem; }  /* 12px */
.gap-4 { gap: 1rem; }     /* 16px */
.gap-6 { gap: 1.5rem; }   /* 24px */
.gap-8 { gap: 2rem; }     /* 32px */
.gap-12 { gap: 3rem; }    /* 48px */
.gap-16 { gap: 4rem; }    /* 64px */
.gap-24 { gap: 6rem; }    /* 96px */

.p-2 { padding: 0.5rem; }      /* 8px */
.p-4 { padding: 1rem; }        /* 16px */
.p-6 { padding: 1.5rem; }      /* 24px */
.p-8 { padding: 2rem; }        /* 32px */
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }      /* 48px */
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }      /* 64px */
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }      /* 96px */

.px-4 { padding-left: 1rem; padding-right: 1rem; }       /* 16px */
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }   /* 24px */
.px-8 { padding-left: 2rem; padding-right: 2rem; }       /* 32px */

/* 入场动画 */
@keyframes fade-in-up {
  0% { 
    opacity: 0; 
    transform: translateY(30px);
  }
  100% { 
    opacity: 1; 
    transform: translateY(0);
  }
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* 交互动画 */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes glow {
  0%, 100% { box-shadow: var(--shadow-card); }
  50% { box-shadow: var(--shadow-glow); }
}

/* 工具类 */
.hover-scale { 
  transition: var(--transition-smooth);
}
.hover-scale:hover { 
  transform: scale(1.05);
}

.hover-lift { 
  transition: var(--transition-smooth);
}
.hover-lift:hover { 
  transform: translateY(-4px);
  box-shadow: var(--shadow-float);
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* 可访问性支持 */
@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;
  }
}

/* 高对比度支持 */
@media (prefers-contrast: high) {
  :root {
    --primary: 220 100% 40%;
    --accent: 40 100% 45%;
    --neutral-800: 210 15% 10%;
    --neutral-700: 210 15% 20%;
  }
}

/* 焦点指示器 */
:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
  border-radius: 4px;
}

/* 触摸目标最小尺寸 */
button, a, input, textarea, select {
  min-height: 44px;
  min-width: 44px;
}

/* 布局工具类 */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (min-width: 1024px) {
  .container { padding-left: 2rem; padding-right: 2rem; }
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.text-center { text-align: center; }

.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}