/* base.css - Apple HIG 设计系统 v5.0 */
/* === 设计原则：清晰 / 层次 / 一致 / 效率 / 美观 === */

/* ================================================================
   CSS 变量（暖米白 · 等宽间距 · 系统字体）
   ================================================================ */
:root {
  /* ---- 背景色 ---- */
  --bg-primary: #F8F5F0;
  --bg-secondary: #F2EFE9;
  --bg-tertiary: #EBE6DC;
  --bg-card: #FFFFFF;

  /* ---- 文字色 ---- */
  --text-primary: #2C2C2E;
  --text-secondary: #8A8680;
  --text-tertiary: rgba(44,44,46,0.35);
  --text-muted: rgba(44,44,46,0.20);

  /* ---- 强调色（暖金，仅宜忌保留色之外可用） ---- */
  --accent-color: #B8860B;
  --accent-opacity: rgba(184,134,11,0.12);

  /* ---- 分割线 / 边框 ---- */
  --separator: rgba(0,0,0,0.05);
  --separator-light: rgba(0,0,0,0.05);
  --border-color: rgba(0,0,0,0.05);

  /* ---- 交互 ---- */
  --hover-bg: rgba(0,0,0,0.04);
  --active-bg: rgba(0,0,0,0.08);

  /* ---- 阴影 ---- */
  --card-shadow: 0 2px 12px rgba(0,0,0,0.06);
  --card-shadow-hover: 0 4px 20px rgba(0,0,0,0.10);
  --popup-shadow: 0 8px 32px rgba(0,0,0,0.08);
  --nav-shadow: 0 1px 0 rgba(0,0,0,0.05);

  /* ---- 遮罩 ---- */
  --overlay-bg: rgba(0,0,0,0.32);

  /* ---- 按钮 ---- */
  --btn-bg: #FFFFFF;
  --btn-border: #E0DED8;
  --btn-text: #666666;
  --btn-hover-bg: #F8F5F0;
  --btn-hover-text: #000000;

  /* ---- 宜忌保留色 ---- */
  --yi-green: #34C759;
  --ji-red: #FF453A;

  /* ---- 当前时辰高亮 ---- */
  --solar-current-bg: #2C2C2E;
  --solar-current-text: #F8F5F0;

  /* ============ 圆角系统 ============ */
  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-pill: 9999px;
  /* 兼容旧变量 */
  --radius-container: 20px;
  --radius-card: 12px;
  --radius-button: 8px;
  --radius-input: 10px;
  --radius-badge: 6px;

  /* ============ 间距（8pt 栅格） ============ */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;

  /* ============ 字体系统 ============ */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Menlo", "Courier New", monospace;

  /* 字号 */
  --fs-temp: 32px;          /* 气温 */
  --fs-title: 18px;          /* 日期 / 卡片标题 */
  --fs-body: 15px;           /* 正文 */
  --fs-secondary: 14px;      /* 次要文字 */
  --fs-meta: 13px;           /* 元信息 */
  --fs-caption: 12px;        /* 辅助说明 */
  /* 兼容旧变量 */
  --font-large-title: 34px;
  --font-title-1: 28px;
  --font-title-2: 22px;
  --font-title-3: 20px;
  --font-headline: 17px;
  --font-body: 17px;
  --font-callout: 16px;
  --font-subhead: 15px;
  --font-footnote: 13px;
  --font-caption: 12px;

  /* 字重 */
  --weight-bold: 700;
  --weight-semibold: 600;
  --weight-medium: 500;
  --weight-regular: 400;

  /* ============ 动画 ============ */
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
  --ease-spring: cubic-bezier(0.25, 0.46, 0.45, 1.4);
  /* 兼容 */
  --ease-apple: cubic-bezier(0.42, 0, 0.58, 1);
  --ease-exit: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-page: cubic-bezier(0.32, 0.72, 0.38, 1);
  --transition-speed: 0.2s;

  /* ============ 毛玻璃（仅弹窗遮罩用） ============ */
  --glass-blur: blur(20px) saturate(180%);
  --glass-blur-light: blur(10px) saturate(180%);

  /* ============ 弹窗 ============ */
  --modal-bg: var(--bg-card);
  --modal-close-bg: rgba(0,0,0,0.06);
  --modal-close-hover-bg: rgba(0,0,0,0.10);
  --modal-close-text: var(--text-secondary);

  /* ============ 最小触控 ============ */
  --touch-min: 44px;
}

/* ---- 深色主题 ---- */
[data-theme="dark"] {
  --bg-primary: #1C1E24;
  --bg-secondary: #252830;
  --bg-tertiary: #2C2E36;
  --bg-card: #252830;

  --text-primary: #E8E6E1;
  --text-secondary: #989690;
  --text-tertiary: rgba(232,230,225,0.35);
  --text-muted: rgba(232,230,225,0.20);

  --accent-color: #D4A843;
  --accent-opacity: rgba(212,168,67,0.15);

  --separator: rgba(255,255,255,0.08);
  --separator-light: rgba(255,255,255,0.05);
  --border-color: rgba(255,255,255,0.08);

  --hover-bg: rgba(255,255,255,0.06);
  --active-bg: rgba(255,255,255,0.10);

  --card-shadow: 0 2px 12px rgba(0,0,0,0.30);
  --card-shadow-hover: 0 4px 20px rgba(0,0,0,0.40);
  --popup-shadow: 0 8px 32px rgba(0,0,0,0.40);
  --nav-shadow: 0 1px 0 rgba(255,255,255,0.05);

  --overlay-bg: rgba(0,0,0,0.55);

  --btn-bg: #2C2E36;
  --btn-border: rgba(255,255,255,0.10);
  --btn-text: #989690;
  --btn-hover-bg: rgba(255,255,255,0.06);
  --btn-hover-text: #E8E6E1;

  --solar-current-bg: #E8E6E1;
  --solar-current-text: #1C1E24;

  --modal-bg: #252830;
  --modal-close-bg: rgba(255,255,255,0.06);
  --modal-close-hover-bg: rgba(255,255,255,0.10);
  --modal-close-text: #989690;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: #1C1E24;
    --bg-secondary: #252830;
    --bg-tertiary: #2C2E36;
    --bg-card: #252830;
    --text-primary: #E8E6E1;
    --text-secondary: #989690;
    --text-tertiary: rgba(232,230,225,0.35);
    --text-muted: rgba(232,230,225,0.20);
    --accent-color: #D4A843;
    --accent-opacity: rgba(212,168,67,0.15);
    --separator: rgba(255,255,255,0.08);
    --separator-light: rgba(255,255,255,0.05);
    --border-color: rgba(255,255,255,0.08);
    --hover-bg: rgba(255,255,255,0.06);
    --active-bg: rgba(255,255,255,0.10);
    --card-shadow: 0 2px 12px rgba(0,0,0,0.30);
    --card-shadow-hover: 0 4px 20px rgba(0,0,0,0.40);
    --popup-shadow: 0 8px 32px rgba(0,0,0,0.40);
    --nav-shadow: 0 1px 0 rgba(255,255,255,0.05);
    --overlay-bg: rgba(0,0,0,0.55);
    --btn-bg: #2C2E36;
    --btn-border: rgba(255,255,255,0.10);
    --btn-text: #989690;
    --btn-hover-bg: rgba(255,255,255,0.06);
    --btn-hover-text: #E8E6E1;
    --solar-current-bg: #E8E6E1;
    --solar-current-text: #1C1E24;
    --modal-bg: #252830;
    --modal-close-bg: rgba(255,255,255,0.06);
    --modal-close-hover-bg: rgba(255,255,255,0.10);
    --modal-close-text: #989690;
  }
}

/* ================================================================
   全局重置
   ================================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-user-select: none !important;
  user-select: none !important;
}
html, body {
  -webkit-touch-callout: none;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-y: auto;
  background-color: var(--bg-primary);
  overscroll-behavior: none;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
html::-webkit-scrollbar { display: none; }

body {
  font-family: var(--font-sans);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  transition: background-color 0.25s var(--ease-in-out),
              color 0.25s var(--ease-in-out);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  touch-action: auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  animation: fadeIn 0.4s var(--ease-in-out) both;
}

.theme-lock, .theme-lock *, .theme-lock *::before, .theme-lock *::after {
  transition: none !important;
  animation: none !important;
}

/* 通用卡片样式 */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-md); /* 12px */
  box-shadow: var(--card-shadow);
  padding: var(--space-lg); /* 24px */
  transition: box-shadow 0.2s var(--ease-in-out);
}
.card:hover {
  box-shadow: var(--card-shadow-hover);
}

/* 子卡片（嵌套内容区） */
.sub-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-md); /* 12px */
  padding: var(--space-md); /* 16px */
}

/* 分隔线 */
.divider {
  border: none;
  border-top: 1px solid var(--separator);
  margin: var(--space-md) 0;
}

/* Focus Ring */
::focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,122,255,0.3);
  border-radius: var(--radius-sm);
}

[disabled], .disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* ================================================================
   滚动容器
   ================================================================ */
.scroll-container {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.scroll-container::-webkit-scrollbar { display: none; }

/* ================================================================
   减弱动效
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}