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

   视觉基准：网格纸背景 + 白纸卡片（2px 墨线 + 硬投影 + 微旋转），蓝白配色。
   本文件由 demo 的 shared/styles.css 顶部 :root（涂鸦调色板与语义层）与
   tokens.css（字体 / 字号 / 间距 / 层级 / 作品占位色板）合并去重而来：
   同名冲突以涂鸦层为准（--radius-md 8px、--shell-max 1120px、
   --control-height 38px、--measure-base 34em），圆角尺度随之重排为 2/4/8/12
   保持递增；扁平时代的灰蓝色板与深色主题不带入；动效时长取涂鸦层实际用值
   150 / 200 / 400ms。颜色 / 字号 / 间距 / 圆角 / 阴影 / 动效时长只在本文件定值。
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- ① 字体 */
  /* 系统 UI 字体栈 + 本机手写字体栈；不依赖远程字体，避免字体替换造成首屏布局偏移 */
  --font-sans: system-ui, -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;
  --font-marker: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  --font-hand: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;

  /* 多语言（dist/lang.js 切换时改 <html lang>）：日文假名在手写字体里没有字形，
     退到 cursive 会落到默认宋体，观感突兀；按语言补日文字体栈，优先圆体贴手写风。
     specificity 高于 :root，lang 属性一变即整体生效。 */
  html[lang="ja"] {
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Meiryo",
      "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --font-marker: "Segoe Print", "Bradley Hand", "Comic Sans MS",
      "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", cursive;
    --font-hand: "Segoe Print", "Bradley Hand", "Comic Sans MS",
      "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Yu Gothic", "Meiryo", cursive;
  }
  html[lang="en"] {
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      "Helvetica Neue", Arial, sans-serif;
  }

  /* 字号：内容站密度，正文 14px */
  --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;

  /* 排版度量：正文行宽上限 */
  --measure-tight: 32ch;
  --measure-lead: 52ch;
  --measure-base: 34em;
  --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: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --radius-sketchy: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --radius-sketchy-alt: 2px 255px 3px 25px / 255px 5px 225px 5px;

  /* ------------------------------------------------------------ ④ 尺寸骨架 */
  --shell-max: 1120px;
  --gutter: 32px;
  --control-height: 38px;

  /* ------------------------------------------------------- ⑤ 硬投影（纸片） */
  --shadow-paper-sm: 2px 2px 0 var(--ink);
  --shadow-paper: 4px 4px 0 var(--ink);
  --shadow-paper-lg: 6px 6px 0 var(--ink);
  --shadow-tape: 0 1px 3px rgba(35, 64, 107, 0.15);
  --shadow-1: var(--shadow-paper-sm);
  --shadow-2: var(--shadow-paper);
  --shadow-3: var(--shadow-paper-lg);

  /* ---------------------------------------------------------------- ⑥ 动效 */
  --duration-1: 150ms;
  --duration-2: 200ms;
  --duration-3: 400ms;
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);

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

  /* ------------------------------------------------- ⑧ 涂鸦调色板（蓝白） */
  --ink: #23406b;
  --ink-70: #4d678c;
  --ink-45: #7f93b2;
  --paper: #f6fafd;
  --paper-card: #ffffff;
  --marker: #3d7bd9;
  --marker-soft: #b8d8f8;
  --sticky-1: #dbeafe;
  --sticky-2: #eaf3fc;
  --sticky-3: #ffffff;
  --grid-line: #cfe0f0;
  --tape: rgba(255, 255, 255, 0.6);
  --tape-shine: rgba(255, 255, 255, 0.35);

  /* -------------------- ⑨ 作品区叠加色（画在作品图上，不随主题翻转） */
  --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(35, 64, 107, 0.2);
  --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;
  --art-owner-picks-a: #9fb4c7; --art-owner-picks-b: #33465c;

  /* ------------------------------------------- ⑪ 语义层（组件层只准用这层） */
  --text-primary: var(--ink);
  --text-secondary: var(--ink-70);
  --text-tertiary: var(--ink-45);
  --text-inverse: #ffffff;
  --brand: var(--marker);
  --brand-ink: #ffffff;
  --brand-soft: var(--marker-soft);
  --brand-hover: #2f66b8;
  --accent: var(--marker);
  --accent-soft: var(--marker-soft);
  --bg-app: var(--paper);
  --bg-surface: var(--paper-card);
  --bg-inset: var(--sticky-2);
  --bg-raised: var(--paper-card);
  --bg-stage: var(--sticky-1);
  --bg-hover: var(--sticky-2);
  --border-default: var(--ink);
  --border-strong: var(--ink);
  --border-subtle: var(--grid-line);
}

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

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

/* 起步包补充：正式站在 v2.css 里补齐的角色色（GPT / GLM / 阶跃 / MiMo） */
:root {
  --art-gpt-a: #7fd1b9;      --art-gpt-b: #1d6b57;
  --art-glm-a: #8fb3f2;      --art-glm-b: #2a4a8f;
  --art-stepfun-a: #8fd3f4;  --art-stepfun-b: #1f6b8f;
  --art-mimo-a: #ffbf8a;     --art-mimo-b: #b3541e;
}