/* =========================================================
   玄易算命 — 古朴中式风格设计令牌
   ========================================================= */

:root {
  /* 品牌主色：朱砂红 */
  --xuanyi-primary: #9A3434;
  --xuanyi-primary-50: #FDF5F5;
  --xuanyi-primary-100: #F5E3E3;
  --xuanyi-primary-200: #E8C3C3;
  --xuanyi-primary-300: #D89999;
  --xuanyi-primary-400: #C76B6B;
  --xuanyi-primary-500: #9A3434;
  --xuanyi-primary-600: #7F2B2B;
  --xuanyi-primary-700: #662222;
  --xuanyi-primary-800: #4D1A1A;
  --xuanyi-primary-900: #341111;

  /* 金色点缀 */
  --xuanyi-gold: #C9A86C;
  --xuanyi-gold-100: #F9F2E4;
  --xuanyi-gold-200: #F0E2C5;
  --xuanyi-gold-300: #E3CFA3;
  --xuanyi-gold-400: #D4B883;
  --xuanyi-gold-500: #C9A86C;
  --xuanyi-gold-600: #A88B57;
  --xuanyi-gold-700: #876D43;

  /* 背景与表面：宣纸、墨色、水墨灰 */
  --xuanyi-paper: #F7F4ED;
  --xuanyi-paper-dark: #ECE6D8;
  --xuanyi-ink: #2A2622;
  --xuanyi-ink-2: #544D45;
  --xuanyi-ink-3: #7D7569;
  --xuanyi-ink-4: #A9A198;

  /* 语义别名 */
  --xuanyi-background: #F7F4ED;
  --xuanyi-foreground: #2A2622;
  --xuanyi-card: #FFFFFF;
  --xuanyi-card-foreground: #2A2622;
  --xuanyi-popover: #FFFFFF;
  --xuanyi-popover-foreground: #2A2622;
  --xuanyi-primary-foreground: #FFFFFF;
  --xuanyi-muted: #ECE6D8;
  --xuanyi-muted-foreground: #7D7569;
  --xuanyi-border: #DDD7CA;
  --xuanyi-input: #DDD7CA;
  --xuanyi-ring: #9A3434;

  /* 状态色 */
  --xuanyi-state-success: #4A6E48;
  --xuanyi-state-warning: #B8860B;
  --xuanyi-state-error: #9A3434;
  --xuanyi-state-info: #4A6C8C;

  /* 圆角 */
  --xuanyi-radius-sm: 2px;
  --xuanyi-radius-md: 8px;
  --xuanyi-radius-lg: 12px;
  --xuanyi-radius-full: 9999px;

  /* 阴影 */
  --xuanyi-shadow-1: 0 1px 2px rgba(42, 38, 34, 0.05), 0 1px 1px rgba(42, 38, 34, 0.03);
  --xuanyi-shadow-2: 0 8px 24px -8px rgba(42, 38, 34, 0.12);
  --xuanyi-shadow-3: 0 24px 60px -20px rgba(42, 38, 34, 0.22);

  /* 字体 */
  --xuanyi-font-title: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  --xuanyi-font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Heiti SC", system-ui, sans-serif;
  --xuanyi-font-mono: "SF Mono", "Fira Code", "Noto Sans SC", monospace;
}

[data-theme="dark"] {
  --xuanyi-background: #1C1915;
  --xuanyi-foreground: #F0EBE1;
  --xuanyi-card: #27241F;
  --xuanyi-card-foreground: #F0EBE1;
  --xuanyi-popover: #27241F;
  --xuanyi-popover-foreground: #F0EBE1;
  --xuanyi-primary: #C76B6B;
  --xuanyi-primary-foreground: #FFFFFF;
  --xuanyi-muted: #2F2B25;
  --xuanyi-muted-foreground: #A9A198;
  --xuanyi-border: #3E3932;
  --xuanyi-input: #3E3932;
  --xuanyi-ring: #C76B6B;
  --xuanyi-paper: #1C1915;
  --xuanyi-paper-dark: #27241F;
  --xuanyi-ink: #F0EBE1;
  --xuanyi-ink-2: #D9D3C7;
  --xuanyi-ink-3: #A9A198;
  --xuanyi-ink-4: #7D7569;
}

/* =========================================================
   排版类
   ========================================================= */
.xuanyi-title-xl {
  font-family: var(--xuanyi-font-title);
  font-size: 28px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.xuanyi-title-lg {
  font-family: var(--xuanyi-font-title);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.xuanyi-title-md {
  font-family: var(--xuanyi-font-title);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.xuanyi-body {
  font-family: var(--xuanyi-font-body);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 400;
}
.xuanyi-body-sm {
  font-family: var(--xuanyi-font-body);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 400;
}
.xuanyi-caption {
  font-family: var(--xuanyi-font-body);
  font-size: 11px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* =========================================================
   公共样式
   ========================================================= */
* { -webkit-tap-highlight-color: transparent; }

html, body {
  background: var(--xuanyi-background);
  color: var(--xuanyi-foreground);
  font-family: var(--xuanyi-font-body);
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 滚动条美化 */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--xuanyi-border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--xuanyi-ink-4); }

/* Lucide 图标渲染 */
[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: currentColor;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

/* 页面进入动画 */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-enter { animation: pageFadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }

@keyframes sectionFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.section-fade {
  opacity: 0;
  animation: sectionFadeIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 塔罗牌翻转动画 */
@keyframes tarotFlip {
  0%   { transform: rotateY(0deg) scale(1); }
  50%  { transform: rotateY(90deg) scale(1.05); }
  100% { transform: rotateY(0deg) scale(1); }
}
.tarot-flip { animation: tarotFlip 0.9s cubic-bezier(0.4, 0, 0.2, 1) both; }

@keyframes tarotShuffle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-6px) rotate(-3deg); }
  75% { transform: translateY(-4px) rotate(3deg); }
}
.tarot-shuffle { animation: tarotShuffle 0.6s ease-in-out both; }

/* 按钮按压 */
.btn-press { transition: transform 0.08s ease-out, filter 0.2s ease; }
.btn-press:active { transform: scale(0.97); }

/* 卡片 hover 上浮 */
.card-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--xuanyi-shadow-2);
  border-color: color-mix(in srgb, var(--xuanyi-primary) 35%, var(--xuanyi-border));
}

/* 渐变条纹装饰 */
.stripe-gold {
  background: linear-gradient(90deg,
    transparent 0%,
    var(--xuanyi-gold) 20%,
    var(--xuanyi-primary) 50%,
    var(--xuanyi-gold) 80%,
    transparent 100%);
  opacity: 0.9;
}

/* 响应式：桌面端侧边留白 */
@media (min-width: 768px) {
  .app-shell {
    max-width: 480px;
    margin: 0 auto;
    box-shadow: 0 0 80px -20px rgba(42,38,34,0.15);
    min-height: 100vh;
    position: relative;
    background: var(--xuanyi-background);
  }
}
@media (min-width: 1280px) {
  .app-shell { max-width: 520px; }
}

/* 无障碍：focus ring */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--xuanyi-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 进度条填充动画 */
@keyframes barFill {
  from { width: 0%; }
}
.bar-fill { animation: barFill 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* 图片淡入 */
img { -webkit-user-drag: none; }
.img-fade {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.img-fade.loaded { opacity: 1; }