/* 念念 NianNian — Design Tokens
   方向：清爽亲近 · 私人日记 / 朋友聊天
   柔和青绿 + 雾蓝 · 暖灰文字 · 非企业 IM
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Sora:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');

:root {
  /* —— Brand —— */
  --nn-teal-50: #f0f7f5;
  --nn-teal-100: #d8ebe6;
  --nn-teal-200: #b3d7ce;
  --nn-teal-300: #7eb8ab;
  --nn-teal-400: #4f9a8a;
  --nn-teal-500: #2f7d6e;   /* 主色 */
  --nn-teal-600: #246358;
  --nn-teal-700: #1c4d45;

  --nn-mist-100: #e9f0f5;
  --nn-mist-200: #c8d8e6;
  --nn-mist-400: #7a9bb8;
  --nn-mist-500: #5a7f9c;   /* 辅色雾蓝 */

  /* —— Neutrals (warm) —— */
  --nn-ink: #2c2a28;
  --nn-ink-soft: #4a4642;
  --nn-muted: #7a746c;
  --nn-faint: #a39c93;
  --nn-line: #e4dfd8;
  --nn-line-soft: #efeae3;
  --nn-surface: #fffcf9;
  --nn-surface-2: #f7f3ee;
  --nn-canvas-a: #eef5f3;
  --nn-canvas-b: #e8eef4;
  --nn-canvas-c: #f4f0ea;

  /* —— Semantic —— */
  --nn-warn-bg: #fff6e0;
  --nn-warn-border: #f0d48a;
  --nn-warn-text: #7a5c12;
  --nn-danger: #c45c4a;
  --nn-danger-soft: #f8e8e4;
  --nn-success: #2f7d6e;
  --nn-success-soft: #e5f2ee;

  /* —— Chat —— */
  --nn-bubble-me: #2f7d6e;
  --nn-bubble-me-text: #fffcf9;
  --nn-bubble-friend: #fffcf9;
  --nn-bubble-friend-border: #e4dfd8;
  --nn-bubble-friend-text: #2c2a28;

  /* —— Typography —— */
  --font-brand: 'Fraunces', 'Noto Sans SC', serif;
  --font-ui: 'Sora', 'Noto Sans SC', sans-serif;
  --font-body: 'Noto Sans SC', 'Sora', sans-serif;

  --fs-xs: 0.75rem;    /* 12 */
  --fs-sm: 0.8125rem;  /* 13 */
  --fs-base: 0.9375rem;/* 15 */
  --fs-md: 1rem;       /* 16 */
  --fs-lg: 1.125rem;   /* 18 */
  --fs-xl: 1.375rem;   /* 22 */
  --fs-2xl: 1.75rem;   /* 28 */
  --fs-3xl: 2.25rem;   /* 36 */

  --lh-tight: 1.25;
  --lh-snug: 1.4;
  --lh-normal: 1.55;

  /* —— Space (4px base) —— */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* —— Radius —— */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-bubble: 18px;
  --r-sheet: 20px 20px 0 0;
  --r-phone: 36px;

  /* —— Elevation (restrained) —— */
  --shadow-soft: 0 1px 2px rgba(44, 42, 40, 0.04), 0 4px 12px rgba(44, 42, 40, 0.06);
  --shadow-sheet: 0 -8px 32px rgba(44, 42, 40, 0.12);
  --shadow-toast: 0 4px 16px rgba(44, 42, 40, 0.12);

  /* —— Motion —— */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-normal: 240ms;
  --dur-slow: 380ms;

  /* —— Layout —— */
  --phone-w: 390px;
  --phone-h: 844px;
  --safe-top: 47px;
  --safe-bottom: 34px;
  --tab-h: 56px;
  --header-h: 52px;
}