/* ==========================================================================
   theme.css — 设计令牌
   温柔 Ins 风：奶油白 / 裸粉 / 豆沙粉 / 浅灰粉 / 雾紫
   全部颜色通过 CSS 变量暴露，支持运行时换色与柔和深色模式。
   ========================================================================== */

:root {
  /* ——— 基础色板（浅色） ——— */
  --c-cream: #FBF7F4;
  --c-nude: #F3E4DC;
  --c-bean: #C98B92;
  --c-bean-deep: #A96C75;
  --c-rosegrey: #EFE2E4;
  --c-mist: #DED3E6;
  --c-ink: #4A3A3F;
  --c-ink-2: #6B585F;
  --c-ink-3: #8C7A80;
  --c-ink-4: #A8838E;

  /* 语义色 */
  --bg: var(--c-cream);
  --bg-elevated: #FFFFFF;
  --bg-sunken: #F6EEEA;
  --bg-glass: rgba(255, 255, 255, 0.72);
  --bg-overlay: rgba(74, 58, 63, 0.38);

  --fg: var(--c-ink);
  --fg-muted: var(--c-ink-2);
  --fg-subtle: var(--c-ink-3);
  --fg-faint: var(--c-ink-4);
  --fg-on-primary: #FFFFFF;

  --primary: var(--c-bean);
  --primary-deep: var(--c-bean-deep);
  --primary-soft: #F7E9EC;
  --primary-tint: rgba(201, 139, 146, 0.12);

  --accent: #9B8AA6;
  --accent-soft: #EFE9F3;

  --success: #4CAF7D;
  --success-soft: #E8F5EC;
  --warn: #E0A030;
  --warn-soft: #FFF4E3;
  --danger: #D96A6A;
  --danger-soft: #FDEAEA;
  --info: #7A9BC4;
  --info-soft: #EAF1F8;

  --border: #EAD9DC;
  --border-strong: #DCC7CB;
  --divider: rgba(74, 58, 63, 0.07);

  /* 阴影 —— 轻，不要重 */
  --shadow-sm: 0 1px 2px rgba(74, 58, 63, 0.04), 0 2px 6px rgba(74, 58, 63, 0.04);
  --shadow-md: 0 2px 8px rgba(74, 58, 63, 0.06), 0 8px 24px rgba(74, 58, 63, 0.06);
  --shadow-lg: 0 8px 32px rgba(74, 58, 63, 0.12);
  --shadow-fab: 0 6px 20px rgba(169, 108, 117, 0.34);

  /* 圆角 */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-full: 999px;

  /* 间距 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* 字体 */
  --font-sans: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', system-ui, sans-serif;
  --font-serif: 'Songti SC', 'STSong', Georgia, 'Times New Roman', serif;
  --font-round: 'Yuanti SC', 'PingFang SC', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-base: 14.5px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;

  --lh-tight: 1.25;
  --lh-normal: 1.55;
  --lh-loose: 1.8;

  /* 尺寸 */
  --nav-h: 58px;
  --action-bar-h: 67px; /* padding-top 12 + padding-bottom 12 + btn min-height 42 + border-top 1 */
  --header-h: 52px;
  --tap-min: 44px;   /* 拇指可达的最小点击区 */

  /* 安全区（由 JS 写入实际值，作为 env() 的补充） */
  --sa-top: env(safe-area-inset-top, 0px);
  --sa-right: env(safe-area-inset-right, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  --sa-left: env(safe-area-inset-left, 0px);
  --kb-inset: 0px;   /* 软键盘高度，由 JS 写入 */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 220ms;

  color-scheme: light;
}

/* ——— 换色主题 ——— */
[data-theme='nude'] {
  --bg: #FAF3EE; --bg-sunken: #F3E7DF; --primary: #C99A88; --primary-deep: #A87A68;
  --primary-soft: #F6E9E2; --border: #EBD8CE; --c-bean: #C99A88;
}
[data-theme='bean'] {
  --bg: #FBF6F5; --bg-sunken: #F5E7E7; --primary: #B97E86; --primary-deep: #96606A;
  --primary-soft: #F6E7E9; --border: #E9D2D5;
}
[data-theme='rosegrey'] {
  --bg: #F8F7F8; --bg-sunken: #EFECEF; --primary: #A98F97; --primary-deep: #87707A;
  --primary-soft: #F1EAED; --border: #E2DADE;
}
[data-theme='mist'] {
  --bg: #F9F7FB; --bg-sunken: #F0EBF5; --primary: #9B8AA6; --primary-deep: #79688A;
  --primary-soft: #EFE9F3; --border: #E3DAEA;
}

/* ——— 柔和深色模式 ——— */
[data-mode='dark'] {
  --bg: #211B1E;
  --bg-elevated: #2B2327;
  --bg-sunken: #1A1518;
  --bg-glass: rgba(43, 35, 39, 0.76);
  --bg-overlay: rgba(10, 8, 9, 0.6);

  --fg: #EDE2E5;
  --fg-muted: #C7B6BB;
  --fg-subtle: #A79298;
  --fg-faint: #8B767C;

  --primary: #D49AA2;
  --primary-deep: #E2AEB5;
  --primary-soft: #3A2C30;
  --primary-tint: rgba(212, 154, 162, 0.14);

  --accent: #B6A3C4;
  --accent-soft: #322B38;

  --success: #6FC394;
  --success-soft: #24322A;
  --warn: #E2B05C;
  --warn-soft: #362D1F;
  --danger: #E38383;
  --danger-soft: #3A2526;
  --info: #93AFD4;
  --info-soft: #232C36;

  --border: #3B3135;
  --border-strong: #4A3E43;
  --divider: rgba(237, 226, 229, 0.08);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.46);
  --shadow-fab: 0 6px 20px rgba(0, 0, 0, 0.44);

  color-scheme: dark;
}

/* 跟随系统 */
@media (prefers-color-scheme: dark) {
  [data-mode='auto'] {
    --bg: #211B1E; --bg-elevated: #2B2327; --bg-sunken: #1A1518;
    --bg-glass: rgba(43, 35, 39, 0.76); --bg-overlay: rgba(10, 8, 9, 0.6);
    --fg: #EDE2E5; --fg-muted: #C7B6BB; --fg-subtle: #A79298; --fg-faint: #8B767C;
    --primary: #D49AA2; --primary-deep: #E2AEB5; --primary-soft: #3A2C30;
    --primary-tint: rgba(212, 154, 162, 0.14);
    --accent: #B6A3C4; --accent-soft: #322B38;
    --success: #6FC394; --success-soft: #24322A;
    --warn: #E2B05C; --warn-soft: #362D1F;
    --danger: #E38383; --danger-soft: #3A2526;
    --info: #93AFD4; --info-soft: #232C36;
    --border: #3B3135; --border-strong: #4A3E43;
    --divider: rgba(237, 226, 229, 0.08);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.34);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.46);
    --shadow-fab: 0 6px 20px rgba(0, 0, 0, 0.44);
    color-scheme: dark;
  }
}

/* 字体选择 */
[data-font='round'] { --font-sans: var(--font-round); }
[data-font='serif'] { --font-sans: var(--font-serif); }

/* 字号缩放 */
:root { --scale: 1; }
body { font-size: calc(var(--fs-base) * var(--scale)); }

/* 降低动效（系统设置） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}