/* ==========================================================================
   蓝色大肥鱼 · 设计 Token
   --------------------------------------------------------------------------
   分层约定：
     ① primitive  原始值：色板、字号、间距、圆角、时长 —— 只在本文件出现
     ② semantic   语义别名：--text-primary / --bg-surface … —— 组件层只准用这一层
     ③ component  组件样式（styles.css）—— 禁止硬编码色值，一律 var(--*)

   视觉基准参考 pixiv / GitHub 这类成熟内容站点：亮色为默认，中性灰底 + 标准蓝，
   小圆角、14px 正文、分节靠 1px 描边而不是阴影和辉光。
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- ① 字体 */
  /* 系统 UI 字体栈：和成熟站点一致，不引入网络字体，首屏不闪 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* 字号：内容站密度，正文 14px，页面标题 24px 封顶 */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 24px;
  --text-hero: 26px;

  --leading-tight: 1.3;
  --leading-snug: 1.5;
  --leading-normal: 1.7;
  --leading-loose: 1.85;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 600;
  --weight-black: 700;

  /* 排版度量：正文行宽上限（ch 按元素自身字号换算）
     中文正文 25–40 字/行最舒服，14px 下约等于 50–80ch */
  --measure-tight: 32ch;
  --measure-lead: 52ch;
  --measure-base: 66ch;
  --measure-wide: 84ch;

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

  /* ------------------------------------------------- ③ 圆角（成熟站点偏小） */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  /* ------------------------------------------------------------ ④ 尺寸骨架 */
  --shell-max: 1440px;
  --gutter: 32px;
  --sidebar-width: 184px;
  --panel-width: 300px;
  --control-height: 36px;
  --topbar-height: 56px;

  /* ---------------------------------------------------------------- ⑤ 动效 */
  --duration-1: 100ms;
  --duration-2: 160ms;
  --duration-3: 240ms;
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);

  /* ---------------------------------------------------------------- ⑥ 层级 */
  --z-sticky: 20;
  --z-scrim: 40;
  --z-drawer: 50;
  --z-toast: 90;

  /* ------------------------------------------------------------ ⑦ 原始色板 */
  /* 中性灰 */
  --gray-0: #ffffff;
  --gray-50: #f7f8fa;
  --gray-100: #eff1f4;
  --gray-200: #e2e5ea;
  --gray-300: #cdd2d9;
  --gray-400: #a5adb8;
  --gray-500: #79828f;
  --gray-600: #59626f;
  --gray-700: #3b4450;
  --gray-800: #262c34;
  --gray-900: #14171b;

  /* 标准蓝（主色） */
  --blue-50: #eaf3fc;
  --blue-100: #d3e6f9;
  --blue-500: #2b7fd4;
  --blue-600: #0969da;
  --blue-700: #0757b5;

  /* 状态色 */
  --red-600: #cf222e;
  --amber-100: #fdf3d3;
  --amber-700: #7a5a00;

  /* 深色主题用的中性色（不用蓝黑，避免偏色调） */
  --gray-950: #131518;
  --gray-875: #1b1e22;
  --gray-850: #212529;
  --gray-825: #282c31;
  --gray-775: #343941;

  /* -------------------- ⑧ 作品区叠加色（画在作品图上，不随主题翻转） */
  --on-art: #ffffff;
  --on-art-solid: rgba(255, 255, 255, 0.94);
  --on-art-ink: #14171b;
  --on-art-veil: rgba(20, 23, 27, 0.62);
  --on-art-veil-strong: rgba(20, 23, 27, 0.82);
  --on-art-line: rgba(255, 255, 255, 0.28);
  --art-veil-light: rgba(255, 255, 255, 0.2);
  --art-veil-dark: rgba(0, 0, 0, 0.16);
  --art-text-shadow: 0 1px 8px rgba(0, 0, 0, 0.28);

  /* ------------------------------------------- ⑨ 作品占位色板（角色配色） */
  --art-deepseek-a: #6bb9d4;   --art-deepseek-b: #243a7a;
  --art-doubao-a: #ffbb91;     --art-doubao-b: #d86f88;
  --art-kimi-a: #8e8ee9;       --art-kimi-b: #32295f;
  --art-qwen-a: #69d6c4;       --art-qwen-b: #1f6c79;
  --art-claude-a: #ecbd79;     --art-claude-b: #8c4f43;
  --art-gemini-a: #7ca7ef;     --art-gemini-b: #3d3c80;
  --art-grok-a: #778290;       --art-grok-b: #222936;
  --art-other-a: #d797c9;      --art-other-b: #563c76;
}

/* ==========================================================================
   ② 语义层 · 亮色（默认主题）
   ========================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg-app: var(--gray-50);
  --bg-surface: var(--gray-0);
  --bg-raised: var(--gray-0);
  --bg-inset: var(--gray-100);
  --bg-hover: var(--gray-100);
  --bg-active: var(--gray-200);
  --bg-stage: #f4f5f7;

  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong: var(--gray-400);

  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-500);
  --text-inverse: var(--gray-0);

  --brand: var(--blue-600);
  --brand-hover: var(--blue-700);
  --brand-ink: var(--gray-0);
  --brand-soft: var(--blue-50);
  --brand-line: var(--blue-500);

  --accent: var(--gray-700);
  --accent-soft: var(--gray-100);

  --shadow-1: 0 1px 2px rgba(20, 23, 27, 0.06);
  --shadow-2: 0 2px 8px rgba(20, 23, 27, 0.08);
  --shadow-3: 0 10px 28px rgba(20, 23, 27, 0.14);

  --scrim: rgba(20, 23, 27, 0.4);
  --ring: 0 0 0 3px rgba(9, 105, 218, 0.16);
  --code-bg: var(--gray-100);
}

/* ==========================================================================
   ② 语义层 · 深色（中性灰黑，不带蓝调）
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --bg-app: var(--gray-950);
  --bg-surface: var(--gray-875);
  --bg-raised: var(--gray-850);
  --bg-inset: var(--gray-825);
  --bg-hover: var(--gray-825);
  --bg-active: var(--gray-775);
  --bg-stage: #0f1114;

  --border-subtle: #2b2f35;
  --border-default: #3a3f47;
  --border-strong: #4d535c;

  --text-primary: #e8eaed;
  --text-secondary: #a6adb6;
  --text-tertiary: #7c848e;
  --text-inverse: var(--gray-900);

  --brand: #4d9bff;
  --brand-hover: #6eb0ff;
  --brand-ink: #0f1114;
  --brand-soft: rgba(77, 155, 255, 0.14);
  --brand-line: rgba(77, 155, 255, 0.5);

  --accent: #b8c0ca;
  --accent-soft: var(--gray-825);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 10px 28px rgba(0, 0, 0, 0.55);

  --scrim: rgba(0, 0, 0, 0.6);
  --ring: 0 0 0 3px rgba(77, 155, 255, 0.22);
  --code-bg: #1a1d21;
}

/* ==========================================================================
   响应式：小屏重定义 Token 本身，组件层无需重复写断点
   ========================================================================== */
@media (max-width: 1080px) {
  :root {
    --gutter: 24px;
    --sidebar-width: 168px;
    --panel-width: 272px;
  }
}

@media (max-width: 760px) {
  :root {
    --gutter: 16px;
    --control-height: 34px;
    --topbar-height: 52px;
    --text-hero: 24px;
    --text-3xl: 20px;
    --space-9: 40px;
    --space-10: 48px;
  }
}