/* Hallmark · macrostructure: Presence Workbench · tone: soft companion · anchor hue: mint-sky
 * theme: evolved Morning Mint · genre: editorial · designed-as-app · design-system: DESIGN.md
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 */
/* ============================================================
   EchoChat Rebuild · Design Tokens
   统一设计变量：颜色/字号/圆角/间距/阴影/动画
   Authority: DESIGN.md — do not pick a catalog theme for /app/
   ============================================================ */

:root {
  --font-family: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;

  /* ---- 颜色：Morning Mint / Brand Identity ---- */
  --color-bg: #FAFCFB;
  --color-surface-chat: #FAFCFB;
  --color-surface: #ffffff;
  --color-surface-2: #F3F7F6;
  --color-surface-3: #E8EEED;
  --color-border: #E3ECE9;
  --color-border-strong: #CDD9D5;
  --color-text: #243238;
  --color-text-secondary: #5A6C72;
  --color-text-tertiary: #6B7C82;
  --color-primary: #7CB8E8;
  --color-primary-hover: #6AABE0;
  --color-primary-soft: #EEF7FD;
  --color-mint: #9DD9C2;
  --color-mint-soft: #EDF9F4;
  --color-accent: #7CB8E8;
  --color-online: #9DD9C2;
  --color-danger: #E57373;
  --color-relationship: var(--color-mint-soft);
  --color-memory: var(--color-primary-soft);
  --color-moments: var(--color-mint-soft);
  --color-warning: #E8C96A;
  --color-success: #6BB89A;
  --color-bubble-me: #EDF9F4;
  --color-bubble-her: #ffffff;
  --color-bubble-me-text: #243238;
  --color-bubble-her-text: #243238;
  --color-glass: rgba(250, 252, 251, 0.88);
  --color-input: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-primary-fg: #ffffff;
  --color-overlay: color-mix(in srgb, var(--color-text) 28%, transparent);
  --overlay-blur: 16px;
  --icon-size: 20px;
  --icon-size-sm: 16px;
  --control-min: 44px;

  /* ---- 字号 ---- */
  --font-display: 28px;
  --font-title: 20px;
  --font-section: 17px;
  --font-body: 15px;
  --font-caption: 13px;
  --font-label: 12px;
  --font-micro: 11px;

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

  /* ---- 行高 ---- */
  --line-tight: 1.3;
  --line-normal: 1.5;
  --line-relaxed: 1.7;

  /* ---- 圆角 ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

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

  /* ---- 阴影 ---- */
  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--color-text) 6%, transparent), 0 8px 16px color-mix(in srgb, var(--color-text) 4%, transparent);
  --shadow-md: 0 8px 24px color-mix(in srgb, var(--color-text) 8%, transparent);
  --shadow-lg: 0 16px 40px color-mix(in srgb, var(--color-text) 10%, transparent);
  --shadow-xl: 0 24px 56px color-mix(in srgb, var(--color-text) 12%, transparent);
  --shadow-glow: 0 0 28px color-mix(in srgb, var(--color-mint) 28%, transparent);

  /* ---- 动画 ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 150ms;
  --dur-normal: 250ms;
  --dur-slow: 350ms;
  --dur-expressive: 480ms;
  --dur-cinematic: 720ms;
  --motion: 220ms var(--ease-out);

  /* ---- 布局 ---- */
  --sidebar-width: 72px;
  --list-width: 320px;
  --profile-width: 340px;
  --topbar-height: 52px;
  --input-height: 48px;
  --bottom-nav-height: 56px;

  /* ---- 安全区 ---- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---- z-index ---- */
  --z-base: 1;
  --z-sticky: 10;
  --z-drawer: 100;
  --z-modal: 200;
  --z-toast: 300;
  --z-tooltip: 400;
}

/* ---- 暗色主题 ---- */
[data-theme="dark"] {
  --color-bg: #0f1419;
  --color-surface-chat: #0f1419;
  --color-surface: #1a2028;
  --color-surface-2: #232b35;
  --color-surface-3: #2d3642;
  --color-border: #2d3642;
  --color-border-strong: #3d4a59;
  --color-text: #e8eef4;
  --color-text-secondary: #9aa8b8;
  --color-text-tertiary: #6b7a8a;
  --color-primary: #7CB8E8;
  --color-primary-hover: #8EC4EE;
  --color-primary-soft: rgba(124, 184, 232, 0.16);
  --color-mint: #9DD9C2;
  --color-mint-soft: rgba(157, 217, 194, 0.14);
  --color-bubble-me: rgba(157, 217, 194, 0.22);
  --color-bubble-me-text: #e8eef4;
  --color-bubble-her: #232b35;
  --color-bubble-her-text: #e8eef4;
  --color-glass: rgba(26, 32, 40, 0.85);
  --color-input: #1a2028;
  --color-surface-elevated: #1e252e;
  --color-primary-fg: #ffffff;
  --color-overlay: color-mix(in srgb, #02060a 62%, transparent);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ---- 主题预设 ---- */
[data-theme-preset="mint"] {
  --color-primary: #7CB8E8;
  --color-primary-hover: #6AABE0;
  --color-primary-soft: #EEF7FD;
  --color-mint: #9DD9C2;
  --color-mint-soft: #EDF9F4;
  --color-bubble-me: #EEF7FD;
  --color-bubble-me-text: #243238;
  --color-bubble-her: #EDF9F4;
  --color-bubble-her-text: #243238;
}
[data-theme-preset="sky"] {
  --color-primary: #5b9cf6;
  --color-primary-hover: #4a8be5;
  --color-primary-soft: #e8f1fd;
  --color-mint: #7ec8e8;
  --color-mint-soft: #e5f4fa;
  --color-bubble-me: #e8f1fd;
  --color-bubble-me-text: #243238;
  --color-bubble-her: #e5f4fa;
  --color-bubble-her-text: #243238;
}
[data-theme-preset="lavender"] {
  --color-primary: #8b7cf6;
  --color-primary-hover: #7a6be5;
  --color-primary-soft: #f0edfd;
  --color-mint: #b4a7f8;
  --color-mint-soft: #ede9fe;
  --color-bubble-me: #f0edfd;
  --color-bubble-me-text: #243238;
  --color-bubble-her: #ede9fe;
  --color-bubble-her-text: #243238;
}
[data-theme-preset="rose"] {
  --color-primary: #f472b6;
  --color-primary-hover: #e561a5;
  --color-primary-soft: #fde8f3;
  --color-mint: #f9a8d4;
  --color-mint-soft: #fdf2f8;
  --color-bubble-me: #fde8f3;
  --color-bubble-me-text: #243238;
  --color-bubble-her: #fdf2f8;
  --color-bubble-her-text: #243238;
}
[data-theme-preset="sage"] {
  --color-primary: #6eb87a;
  --color-primary-hover: #5da769;
  --color-primary-soft: #e8f5ea;
  --color-mint: #84cc84;
  --color-mint-soft: #ecfdf0;
  --color-bubble-me: #e8f5ea;
  --color-bubble-me-text: #243238;
  --color-bubble-her: #ecfdf0;
  --color-bubble-her-text: #243238;
}
[data-theme-preset="cloud"] {
  --color-primary: #94a3b8;
  --color-primary-hover: #8392a7;
  --color-primary-soft: #f1f5f9;
  --color-mint: #b0bac9;
  --color-mint-soft: #f8fafc;
  --color-bubble-me: #f1f5f9;
  --color-bubble-me-text: #243238;
  --color-bubble-her: #f8fafc;
  --color-bubble-her-text: #243238;
}