/* ==========================================================================
   imgbox — Design Tokens
   一套淡雅、安静、克制的创作工具视觉体系。
   参考规范：UIUX Pro Max (Minimal & Direct / E-Ink Paper)
   禁止：紫蓝渐变 / 纯黑 #000 / 霓虹外发光 / 过饱和点缀
   ========================================================================== */

/* ---------- 字体（中文友好） ---------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* 字体族：英文优先 Outfit，中文由 Noto Sans SC 承接 */
  --font-sans: 'Outfit', 'Noto Sans SC', -apple-system, 'PingFang SC',
    'Microsoft YaHei', sans-serif;
  --font-mono: 'JetBrains Mono', 'Noto Sans SC', ui-monospace, monospace;

  /* 字号阶梯 */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 26px;
  --fs-2xl: 34px;
  --fs-3xl: 44px;

  /* 字重 */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* 行高 */
  --lh-tight: 1.25;
  --lh-normal: 1.55;
  --lh-relaxed: 1.75;

  /* 间距阶梯（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;
  --sp-16: 64px;

  /* 圆角（克制，不圆滚滚） */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* 动效 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;

  /* 层级 */
  --z-base: 1;
  --z-sticky: 10;
  --z-overlay: 30;
  --z-modal: 50;
  --z-toast: 70;

  /* 布局 */
  --maxw: 1440px;
  --header-h: 60px;
}

/* ==========================================================================
   浅色模式（默认）—— 暖白纸感，非纯白
   ========================================================================== */
:root,
[data-theme='light'] {
  --bg-canvas: #f7f6f3;   /* 页面底色：暖白 */
  --bg-surface: #ffffff;  /* 卡片/面板 */
  --bg-sunken: #f1efeb;   /* 下沉区（输入框底、代码块） */
  --bg-hover: #f4f2ee;    /* 悬停 */
  --bg-active: #ece9e3;   /* 选中 */

  --text-primary: #1c1d21;
  --text-secondary: #6b6e76;
  --text-tertiary: #9c9fa6;
  --text-inverse: #ffffff;

  --border-subtle: #eae7e1;
  --border-default: #ddd9d2;
  --border-strong: #c7c2b9;

  /* 点缀色：沉静墨绿（饱和度 < 80%） */
  --accent: #3f7d6e;
  --accent-hover: #356a5d;
  --accent-active: #2c5a4f;
  --accent-soft: #e6f0ec;      /* 浅底 */
  --accent-text: #2f5f54;      /* 墨绿文字（保证对比度） */

  --success: #3f7d5e;
  --success-soft: #e7f1eb;
  --warning: #a9702c;
  --warning-soft: #f6efe2;
  --danger: #a8443c;
  --danger-soft: #f5e8e6;

  /* 阴影：用背景色调染，不用纯黑 */
  --shadow-sm: 0 1px 2px rgba(60, 55, 48, 0.05);
  --shadow-md: 0 4px 14px rgba(60, 55, 48, 0.07);
  --shadow-lg: 0 12px 32px rgba(60, 55, 48, 0.1);

  color-scheme: light;
}

/* ==========================================================================
   深色模式 —— 暖炭，非纯黑
   ========================================================================== */
[data-theme='dark'] {
  --bg-canvas: #191a1b;
  --bg-surface: #212224;
  --bg-sunken: #17181a;
  --bg-hover: #292a2d;
  --bg-active: #313336;

  --text-primary: #ececec;
  --text-secondary: #9a9da5;
  --text-tertiary: #6c6f77;
  --text-inverse: #191a1b;

  --border-subtle: #2a2c2e;
  --border-default: #35373a;
  --border-strong: #494c50;

  --accent: #4e9080;
  --accent-hover: #5aa08f;
  --accent-active: #66b09d;
  --accent-soft: #23332f;
  --accent-text: #7fc0ae;

  --success: #5aa47c;
  --success-soft: #1f2c25;
  --warning: #c99a54;
  --warning-soft: #2e2718;
  --danger: #cf7a6f;
  --danger-soft: #2f2120;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}