/* ============================================================
   Saylo Web Studio — Design Tokens
   Haizhucodexdesign 标准 · 虚拟 AI 女友 · 深色沉浸聊天室
   ============================================================ */

:root {
  /* ---- 色板（haizhucodex 深色基底 + 女友系暖粉点缀） ---- */
  --bg-0: #0b0d13;
  --bg-1: #11141d;
  --bg-2: #171b27;
  --bg-3: #1f2433;
  --bg-4: #293044;
  --bg-glass: rgba(23, 27, 39, 0.72);
  --bg-glass-2: rgba(31, 36, 51, 0.55);

  --line-0: rgba(255, 255, 255, 0.05);
  --line-1: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);

  --text-1: #f4f6fb;
  --text-2: #aab3c5;
  --text-3: #6d7689;
  --text-4: #454d5f;

  --accent-1: #4f7cff;
  --accent-2: #8b5cf6;
  --accent-3: #22d3ee;
  --accent-grad: linear-gradient(135deg, #4f7cff 0%, #8b5cf6 100%);
  --accent-grad-cool: linear-gradient(135deg, #22d3ee 0%, #4f7cff 100%);
  --accent-grad-warm: linear-gradient(135deg, #ff5f9e 0%, #ff8e5e 100%);
  --accent-grad-love: linear-gradient(135deg, #ff5f9e 0%, #8b5cf6 100%);
  --accent-soft: rgba(79, 124, 255, 0.14);
  --accent-soft-2: rgba(139, 92, 246, 0.12);
  --accent-soft-warm: rgba(255, 95, 158, 0.14);

  --love-1: #ff5f9e;
  --love-2: #ff8e5e;
  --love-soft: rgba(255, 95, 158, 0.12);

  --success: #34d399;
  --success-soft: rgba(52, 211, 153, 0.12);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, 0.12);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.12);

  /* 角色卡片轨道色 */
  --char-1: #4f7cff;
  --char-2: #8b5cf6;
  --char-3: #ff5f9e;
  --char-4: #22d3ee;
  --char-5: #34d399;
  --char-6: #fbbf24;

  /* ---- 字体 ---- */
  --font-sans: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
    "Noto Sans CJK SC", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas,
    "Liberation Mono", monospace;
  --font-display: "Inter Display", "SF Pro Display", var(--font-sans);

  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-34: 34px;
  --fs-44: 44px;

  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;

  /* ---- 间距（4px 基） ---- */
  --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;

  /* ---- 圆角 ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* ---- 阴影 ---- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-accent: 0 6px 20px rgba(79, 124, 255, 0.35);
  --shadow-love: 0 6px 20px rgba(255, 95, 158, 0.32);
  --glow-accent: 0 0 24px rgba(79, 124, 255, 0.28);
  --glow-love: 0 0 24px rgba(255, 95, 158, 0.25);

  /* ---- 动效 ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- 布局 ---- */
  --sidebar-w: 280px;
  --sidebar-w-wide: 320px;
  --sidebar-w-ultra: 360px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 60px;
  --input-max-w: 780px;
  --msg-max-w: 720px;
  --msg-max-w-wide: 800px;
  --content-max-w: 1200px;
  --content-max-w-wide: 1400px;

  /* ---- 品牌 ---- */
  --brand-gradient: linear-gradient(135deg, #ff5f9e 0%, #8b5cf6 55%, #4f7cff 100%);
}

/* 亮色主题（可选） */
[data-theme="light"] {
  --bg-0: #f6f7fb;
  --bg-1: #ffffff;
  --bg-2: #f1f3f9;
  --bg-3: #e8ebf4;
  --bg-4: #dfe4f0;
  --bg-glass: rgba(255, 255, 255, 0.78);
  --line-0: rgba(15, 23, 42, 0.05);
  --line-1: rgba(15, 23, 42, 0.09);
  --line-2: rgba(15, 23, 42, 0.15);
  --text-1: #0f172a;
  --text-2: #475569;
  --text-3: #94a3b8;
  --text-4: #cbd5e1;
  --accent-soft: rgba(79, 124, 255, 0.1);
  --accent-soft-2: rgba(139, 92, 246, 0.09);
  --love-soft: rgba(255, 95, 158, 0.1);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12);
}