/**
 * SparkHUD EDU 整合样式表
 * 合并 design-tokens + animations + components + core layout
 * 用于 PetPal 前端页面（独立部署，无需 @import）
 *
 * @version 1.0.0
 */

/* ========================================
   1. 设计令牌
   ======================================== */

:root {
  /* 主色系 */
  --primary-50:  #EFF6FF;
  --primary-100: #DBEAFE;
  --primary-200: #BFDBFE;
  --primary-300: #93C5FD;
  --primary-400: #60A5FA;
  --primary-500: #3B82F6;
  --primary-600: #2563EB;
  --primary-700: #1D4ED8;
  --primary-800: #1E40AF;
  --primary-900: #1E3A8A;

  --color-primary:        var(--primary-500);
  --color-primary-hover:   var(--primary-600);
  --color-primary-active:  var(--primary-700);
  --color-primary-light:   var(--primary-100);

  /* 辅助色系 */
  --secondary-50:  #F9FAFB;
  --secondary-100: #F3F4F6;
  --secondary-200: #E5E7EB;
  --secondary-300: #D1D5DB;
  --secondary-400: #9CA3AF;
  --secondary-500: #6B7280;
  --secondary-600: #4B5563;
  --secondary-700: #374151;
  --secondary-800: #1F2937;
  --secondary-900: #111827;

  --color-secondary:       var(--secondary-600);
  --color-secondary-hover: var(--secondary-700);
  --color-secondary-light: var(--secondary-100);

  /* Spark 色系 */
  --spark-50:  #FFF7ED;
  --spark-100: #FFEDD5;
  --spark-200: #FED7AA;
  --spark-300: #FDBA74;
  --spark-400: #FB923C;
  --spark-500: #F97316;
  --spark-600: #EA580C;
  --spark-700: #C2410C;
  --spark-800: #9A3412;
  --spark-900: #7C2D12;

  --color-spark:       var(--spark-500);
  --color-spark-glow:  rgba(249, 115, 22, 0.3);

  /* 语义色系 */
  --success-50:  #ECFDF5;
  --success-100: #D1FAE5;
  --success-500: #10B981;
  --success-600: #059669;
  --success-700: #047857;

  --warning-50:  #FFFBEB;
  --warning-100: #FEF3C7;
  --warning-500: #F59E0B;
  --warning-600: #D97706;
  --warning-700: #B45309;

  --error-50:  #FEF2F2;
  --error-100: #FEE2E2;
  --error-500: #EF4444;
  --error-600: #DC2626;
  --error-700: #B91C1C;

  --info-50:  #EFF6FF;
  --info-100: #DBEAFE;
  --info-500: #3B82F6;
  --info-600: #2563EB;
  --info-700: #1D4ED8;

  --color-success: var(--success-500);
  --color-warning: var(--warning-500);
  --color-error:   var(--error-500);
  --color-info:    var(--info-500);

  /* 背景色系 */
  --bg-primary:   #FFFFFF;
  --bg-secondary: #F9FAFB;
  --bg-tertiary:  #F3F4F6;
  --bg-inverse:   #1F2937;

  /* 渐变 */
  --gradient-primary: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  --gradient-spark:   linear-gradient(135deg, var(--spark-400), var(--spark-600));
  --gradient-brand:   linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  /* 文字色系 */
  --text-primary:   #111827;
  --text-secondary: #4B5563;
  --text-tertiary:  #9CA3AF;
  --text-inverse:   #FFFFFF;
  --text-link:      var(--primary-600);

  /* 边框色系 */
  --border-default: var(--secondary-200);
  --border-hover:   var(--secondary-300);
  --border-focus:   var(--primary-500);

  /* 阴影 */
  --shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* 宠物情绪色系 */
  --pet-happy:   #FBBF24;
  --pet-calm:    #10B981;
  --pet-sad:     #6B7280;
  --pet-angry:   #EF4444;
  --pet-love:    #EC4899;
  --pet-hungry:  #F59E0B;
  --pet-sleepy:  #8B5CF6;

  /* 字体 */
  --font-family-cn: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-family-en: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-base: var(--font-family-en), var(--font-family-cn);

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.563rem;
  --text-2xl:  1.953rem;
  --text-3xl:  2.441rem;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  --leading-tight:  1.25;
  --leading-normal: 1.5;

  /* 间距 */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;

  /* 圆角 */
  --radius-md:    0.5rem;
  --radius-lg:    0.75rem;
  --radius-xl:    1rem;
  --radius-2xl:   1.5rem;
  --radius-full:  9999px;

  /* 过渡 */
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --ease-out:         cubic-bezier(0, 0, 0.2, 1);
  --transition-fast:  all var(--duration-fast) var(--ease-out);
  --transition-normal: all var(--duration-normal) var(--ease-out);

  /* 层级 */
  --z-sticky:  100;
  --z-fixed:   200;
  --z-toast:   600;
}

/* 暗色模式 */
[data-theme="dark"],
.dark {
  --bg-primary:   #111827;
  --bg-secondary: #1F2937;
  --bg-tertiary:  #374151;
  --text-primary:   #F9FAFB;
  --text-secondary: #D1D5DB;
  --text-tertiary:  #9CA3AF;
  --border-default: #374151;
  --border-hover:   #4B5563;
}

/* ========================================
   2. 基础重置
   ======================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; height: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-family-base);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-secondary);
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { line-height: var(--leading-tight); color: var(--text-primary); }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ========================================
   3. 动画
   ======================================== */

@keyframes fade-in-up { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes bounce-pet { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes wiggle { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 5px rgba(59,130,246,0.3); } 50% { box-shadow: 0 0 20px rgba(59,130,246,0.6); } }
@keyframes float { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-6px); } }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes coinBounce { 0% { transform:translateY(0) scale(1); } 40% { transform:translateY(-20px) scale(1.2); } 100% { transform:translateY(0) scale(1); } }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideIn { from { opacity:0; transform:translateX(100px); } to { opacity:1; transform:translateX(0); } }
@keyframes pet-bounce { 0%,100% { transform:translateY(0); } 25% { transform:translateY(-15px); } 50% { transform:translateY(-5px); } 75% { transform:translateY(-10px); } }
@keyframes pet-float { 0%,100% { transform:translateY(0) rotate(0deg); } 25% { transform:translateY(-8px) rotate(2deg); } 50% { transform:translateY(-3px) rotate(0deg); } 75% { transform:translateY(-6px) rotate(-2deg); } }
@keyframes pet-wiggle { 0%,100% { transform:rotate(-5deg); } 50% { transform:rotate(5deg); } }
@keyframes pet-shake { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-3px); } 75% { transform:translateX(3px); } }

.animate-fade-in-up { animation: fade-in-up var(--duration-normal) var(--ease-out); }
.animate-pet-bounce { animation: pet-bounce 2s var(--ease-out) infinite; }
.animate-pet-float  { animation: pet-float 3s var(--ease-out) infinite; }
.animate-pet-wiggle { animation: pet-wiggle 0.5s var(--ease-out) infinite; }
.animate-pet-shake  { animation: pet-shake 0.3s var(--ease-out); }
.animate-coin-bounce { animation: coinBounce 0.6s cubic-bezier(0.68,-0.55,0.265,1.55); }

.fade-in-up { animation: fade-in-up 0.4s ease-out; }
.pet-bounce { animation: bounce-pet 2s ease-in-out infinite; }
.pet-wiggle { animation: wiggle 0.5s ease-in-out; }
.pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
.pet-float { animation: float 3s ease-in-out infinite; }
.pet-shake { animation: shake 0.3s ease-in-out; }
.pet-breathe { animation: breathe 3s ease-in-out infinite; }
.coin-bounce { animation: coinBounce 0.5s ease-out; }
.progress-bar { transition: width 0.5s ease-in-out; }

/* ========================================
   4. 通用布局
   ======================================== */

.container { width:100%; margin-left:auto; margin-right:auto; padding-left:var(--space-4); padding-right:var(--space-4); max-width:1024px; }

.page-wrapper { min-height:100vh; display:flex; flex-direction:column; }
.page-content { flex:1; padding:var(--space-4) 0; }

/* ========================================
   5. 按钮
   ======================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5); font-family: var(--font-family-base);
  font-size: var(--text-base); font-weight: var(--font-medium); line-height: 1;
  text-decoration: none; border: none; border-radius: var(--radius-lg);
  cursor: pointer; transition: var(--transition-fast); user-select: none; white-space: nowrap;
}
.btn:disabled { opacity:0.5; cursor:not-allowed; pointer-events:none; }
.btn:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; }

.btn-primary { background:var(--color-primary); color:white; }
.btn-primary:hover:not(:disabled) { background:var(--color-primary-hover); transform:translateY(-1px); }
.btn-primary:active:not(:disabled) { transform:translateY(0); }

.btn-secondary { background:var(--bg-secondary); color:var(--text-primary); border:1px solid var(--border-default); }
.btn-secondary:hover:not(:disabled) { background:var(--bg-tertiary); }

.btn-ghost { background:transparent; color:var(--text-primary); }
.btn-ghost:hover:not(:disabled) { background:var(--bg-secondary); }

.btn-danger { background:var(--color-error); color:white; }
.btn-danger:hover:not(:disabled) { background:var(--error-600); }

.btn-sm { padding:var(--space-2) var(--space-3); font-size:var(--text-sm); }
.btn-lg { padding:var(--space-4) var(--space-6); font-size:var(--text-lg); border-radius:var(--radius-xl); }
.btn-block { width:100%; }

/* ========================================
   6. 输入框
   ======================================== */

.input {
  width:100%; padding:var(--space-3) var(--space-4);
  font-family:var(--font-family-base); font-size:var(--text-base);
  color:var(--text-primary); background:var(--bg-primary);
  border:1px solid var(--border-default); border-radius:var(--radius-md);
  transition:var(--transition-fast); outline:none;
}
.input::placeholder { color:var(--text-tertiary); }
.input:hover:not(:disabled) { border-color:var(--border-hover); }
.input:focus { border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-light); }
.input:disabled { background:var(--bg-secondary); color:var(--text-tertiary); cursor:not-allowed; }

/* ========================================
   7. 卡片
   ======================================== */

.card {
  background:var(--bg-primary); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm); overflow:hidden; transition:var(--transition-normal);
}
.card:hover { box-shadow:var(--shadow-md); }
.card-body { padding:var(--space-5); }
.card-interactive { cursor:pointer; }
.card-interactive:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }

/* ========================================
   8. 导航栏
   ======================================== */

.navbar {
  position:sticky; top:0; z-index:var(--z-sticky);
  display:flex; align-items:center; justify-content:space-between;
  height:56px; padding:0 var(--space-4);
  background:var(--bg-primary); border-bottom:1px solid var(--border-default);
  backdrop-filter:blur(8px);
}
.navbar-brand {
  display:flex; align-items:center; gap:var(--space-2);
  font-size:var(--text-xl); font-weight:var(--font-bold);
  color:var(--text-primary); text-decoration:none;
}
.navbar-nav { display:flex; align-items:center; gap:var(--space-1); }
.navbar-link {
  padding:var(--space-2) var(--space-3); font-size:var(--text-sm);
  font-weight:var(--font-medium); color:var(--text-secondary);
  text-decoration:none; border-radius:var(--radius-md); transition:var(--transition-fast);
}
.navbar-link:hover { color:var(--text-primary); background:var(--bg-secondary); }
.navbar-link.active { color:var(--color-primary); background:var(--color-primary-light); }

/* ========================================
   9. 徽章
   ======================================== */

.badge {
  display:inline-flex; align-items:center; gap:var(--space-1);
  padding:var(--space-1) var(--space-2); font-size:var(--text-xs);
  font-weight:var(--font-medium); line-height:1; border-radius:var(--radius-full);
}
.badge-primary { background:var(--color-primary-light); color:var(--primary-700); }
.badge-success { background:var(--success-100); color:var(--success-700); }
.badge-warning { background:var(--warning-100); color:var(--warning-700); }
.badge-error   { background:var(--error-100); color:var(--error-700); }
.badge-default { background:var(--bg-tertiary); color:var(--text-tertiary); }

/* ========================================
   10. Toast
   ======================================== */

.toast-container {
  position:fixed; z-index:var(--z-toast);
  display:flex; flex-direction:column; gap:var(--space-2); pointer-events:none;
}
.toast-container.bottom-center { bottom:80px; left:50%; transform:translateX(-50%); }

.toast-item {
  display:flex; align-items:center; gap:var(--space-3);
  min-width:280px; max-width:400px; padding:var(--space-3) var(--space-4);
  background:var(--bg-inverse); color:var(--text-inverse);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  pointer-events:auto; animation:fadeIn 0.3s ease-out;
  font-size:var(--text-sm); font-weight:var(--font-medium);
}
.toast-success { background:var(--success-600); color:white; }
.toast-error   { background:var(--error-600); color:white; }

/* ========================================
   11. 进度条 / 状态条
   ======================================== */

.progress { width:100%; height:8px; background:var(--bg-tertiary); border-radius:var(--radius-full); overflow:hidden; }
.progress-sm { height:6px; }
.progress-bar { height:100%; border-radius:var(--radius-full); transition:width var(--duration-slow); }
.progress-primary .progress-bar { background:var(--color-primary); }
.progress-success .progress-bar { background:var(--color-success); }
.progress-warning .progress-bar { background:var(--color-warning); }
.progress-error .progress-bar   { background:var(--color-error); }

/* 宠物状态条 */
.pet-stat-bar { width:100%; height:10px; background:var(--bg-tertiary); border-radius:var(--radius-full); overflow:hidden; }
.pet-stat-bar .stat-fill { height:100%; border-radius:var(--radius-full); transition:width var(--duration-slow); }

/* 三色状态条 */
.stat-fill.stat-good    { background: var(--success-500); }
.stat-fill.stat-warning { background: var(--warning-500); }
.stat-fill.stat-danger  { background: var(--error-500); }

.pet-stat-bar.stat-hunger .stat-fill { background: var(--spark-500); }
.pet-stat-bar.stat-clean .stat-fill  { background: var(--primary-500); }
.pet-stat-bar.stat-energy .stat-fill { background: var(--spark-400); }
.pet-stat-bar.stat-mood .stat-fill   { background: var(--pet-love); }

/* ========================================
   12. 空状态
   ======================================== */

.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--space-12) var(--space-4); text-align:center; }
.empty-state-icon { font-size:64px; margin-bottom:var(--space-4); opacity:0.5; }
.empty-state-title { font-size:var(--text-lg); font-weight:var(--font-semibold); color:var(--text-primary); margin-bottom:var(--space-2); }
.empty-state-description { font-size:var(--text-sm); color:var(--text-tertiary); max-width:300px; }

/* ========================================
   13. 工具类
   注意：Tailwind CSS CDN 已提供大部分工具类（flex/grid/text/padding/margin 等）
   此处仅保留 Tailwind 未覆盖的自定义工具类
   ======================================== */

/* hide-scrollbar：Tailwind 无此快捷类 */
.hide-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }
.hide-scrollbar::-webkit-scrollbar { display:none; }

/* z-100：Tailwind 默认只到 z-50 */
.z-100 { z-index:100; }

/* 配网码样式 */
.pairing-code {
  font-family: 'Courier New', monospace;
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  letter-spacing: 0.3em;
  color: var(--color-primary);
  text-align: center;
  padding: var(--space-4);
  background: var(--color-primary-light);
  border-radius: var(--radius-xl);
  border: 2px dashed var(--color-primary);
}

.pairing-countdown {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: center;
}

.pairing-countdown.expired {
  color: var(--color-error);
  font-weight: var(--font-semibold);
}

/* 步骤指示器 */
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.step-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--border-default);
  transition: var(--transition-fast);
}

.step-dot.active {
  background: var(--color-primary);
  transform: scale(1.3);
}

.step-dot.completed {
  background: var(--color-success);
}

.step-line {
  width: 24px;
  height: 2px;
  background: var(--border-default);
}

.step-line.completed {
  background: var(--color-success);
}