/* =====================================================================
 * AI Studio · Eta Design Tokens
 * 水形无界 · 凹凸光影 · 超椭圆连续曲率 · 零废话排版
 * 三层：primitive（色板）→ semantic（--bg-* / --text-*）→ component（组件内引用）
 * ===================================================================== */
:root {
  color-scheme: light;
  /* ---- Monet 主题色（data-accent 切换）---- */
  --accent: #3B82F6;
  --accent-rgb: 59, 130, 246;
  --on-accent: #FFFFFF;

  /* ---- 语义色（浅色 · ColorOS 17 Light）---- */
  --bg-page: #F3F5F9;
  --bg-card: #FFFFFF;
  --bg-sub: #F6F8FC;
  --bg-well: #EBEEF5;
  --bg-pill: #E9EDF5;
  --bg-capsule: #14161B;
  --bg-glass: rgba(243, 245, 249, 0.80);
  --bg-scrim: rgba(17, 19, 23, 0.32);
  --bg-hover: rgba(15, 23, 42, 0.045);
  --accent-soft: rgba(var(--accent-rgb), 0.12);
  --text-capsule: #F8FAFC;
  --text-1: #111317;
  --text-2: #5A6270;
  --text-3: #9199A8;
  --hairline: rgba(0, 0, 0, 0.045);
  --specular: 0 4px 16px -4px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02);
  --well-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
  --float-shadow: 0 24px 64px -16px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.03);
  --switch-off: #D2D7E2;
  --ok: #059669;   --ok-soft: rgba(16, 185, 129, 0.11);
  --warn: #D97706; --warn-soft: rgba(245, 158, 11, 0.12);
  --err: #E11D48;  --err-soft: rgba(244, 63, 94, 0.12);

  /* ---- 曲率 ---- */
  --r-card: 24px;
  --r-sub: 16px;
  --r-well: 14px;
  --r-ctl: 12px;
  --r-pill: 9999px;

  /* ---- 动效 ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.28, 1.22, 0.38, 1);
  --dur-fast: 0.16s;
  --dur: 0.28s;
  --dur-slow: 0.42s;

  /* ---- 字体 ---- */
  --font-ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "MiSans", "OPPOSans", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

  /* ---- 流体字号 / 间距（随视口连续缩放）---- */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: clamp(14px, 0.25vw + 13.2px, 15px);
  --fs-lg: clamp(16px, 0.4vw + 14.6px, 18px);
  --fs-xl: clamp(20px, 1vw + 16px, 26px);
  --fs-2xl: clamp(24px, 1.6vw + 18px, 34px);
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: clamp(16px, 1.2vw + 10px, 24px);
  --sp-6: clamp(20px, 2vw + 10px, 36px);

  /* ---- 布局 ---- */
  --sidebar-w: 248px;
  --rail-w: 76px;
  --topbar-h: 60px;
  --tabbar-h: 64px;
  --content-max: 1080px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

html[data-accent="emerald"] { --accent: #10B981; --accent-rgb: 16, 185, 129; }
html[data-accent="violet"]  { --accent: #8B5CF6; --accent-rgb: 139, 92, 246; }
html[data-accent="amber"]   { --accent: #F59E0B; --accent-rgb: 245, 158, 11; --on-accent: #1A1203; }

/* ---- 深色 · OLED Obsidian ---- */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg-page: #000000;
  /* color-mix 不可用时的回退色 */
  --bg-card: #13161C;
  --bg-sub: #1B1F27;
  --bg-well: #090A0D;
  --bg-pill: #242833;
  --bg-capsule: #1C2028;
  --bg-glass: rgba(8, 10, 14, 0.78);
  --bg-scrim: rgba(0, 0, 0, 0.55);
  --bg-hover: rgba(255, 255, 255, 0.05);
  --accent-soft: rgba(var(--accent-rgb), 0.16);
  --text-capsule: #F4F6FA;
  --text-1: #F3F5F8;
  --text-2: #8E96A4;
  --text-3: #545B68;
  --hairline: rgba(255, 255, 255, 0.05);
  --specular: inset 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.025);
  --well-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.65), 0 1px 0 rgba(255, 255, 255, 0.04);
  --float-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 30px 80px -20px rgba(0, 0, 0, 0.9);
  --switch-off: #2B2F3A;
  --ok: #34D399;   --ok-soft: rgba(52, 211, 153, 0.12);
  --warn: #FBBF24; --warn-soft: rgba(251, 191, 36, 0.12);
  --err: #FB7185;  --err-soft: rgba(251, 113, 133, 0.13);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  html[data-theme="dark"] {
    --bg-card: color-mix(in srgb, #13151A 96.5%, var(--accent) 3.5%);
    --bg-sub: color-mix(in srgb, #1B1E25 95%, var(--accent) 5%);
    --bg-pill: color-mix(in srgb, #232730 92%, var(--accent) 8%);
    --bg-capsule: color-mix(in srgb, #1A1D24 90%, var(--accent) 10%);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0.01s; --dur: 0.01s; --dur-slow: 0.01s; --ease-spring: linear; }
}