/* ============================================================================
   小羽毕业创作工作台 · 设计令牌（Design Tokens）
   Phase 3 统一设计系统唯一来源：介绍页（landing）与工作台（app）共用本文件。
   —— 任何颜色 / 字号 / 间距 / 圆角 / 阴影 / 动效都不得在业务样式中硬编码。

   风格定位：暖白纸感底 + 浅蓝专业层。
   - 暖白（paper）承载阅读区，降低长时间写作的屏幕疲劳；
   - 浅蓝（blue）只用于「可操作 / 可确认 / 当前状态」，不用于大面积装饰；
   - 正文对比度 ≥ 4.5:1（AA），标题 ≥ 7:1（AAA），由 test/xiaoyu-design.test.js 自动校验。
   ============================================================================ */

:root {
  /* ---------- 底色与表面 ---------- */
  --xy-paper: #FAF7F1;          /* 暖白主背景 */
  --xy-paper-deep: #F3EEE5;     /* 次级暖白（分区、页脚） */
  --xy-surface: #FFFFFF;        /* 卡片表面 */
  --xy-surface-cool: #F0F6FC;   /* 浅蓝表面（信息区、表头） */
  --xy-surface-cool-deep: #E4EFFA;

  /* ---------- 文字 ---------- */
  --xy-ink: #1B3350;            /* 主文字，对 paper 12.00:1（AAA） */
  --xy-ink-2: #3E5878;          /* 次文字，6.84:1（AA+） */
  --xy-ink-3: #5C7089;          /* 辅助/元信息，4.75:1（AA） */
  --xy-ink-inverse: #FFFFFF;

  /* ---------- 蓝（可操作层） ---------- */
  --xy-blue-700: #24507E;       /* 深蓝：标题 / hover，7.78:1 */
  --xy-blue-600: #2E6395;       /* 主色：按钮底 / 文本链接，白字 6.30:1 */
  --xy-blue-500: #3F7FB9;       /* 图形与描边（非小字文本） */
  --xy-blue-400: #6FA3CF;
  --xy-blue-200: #C3DCF1;
  --xy-blue-100: #DCEAF7;
  --xy-blue-050: #EEF5FC;

  /* ---------- 线与描边 ---------- */
  --xy-line: #E4DED2;           /* 暖灰分隔线（贴合 paper） */
  --xy-line-strong: #D3CABB;
  --xy-line-cool: #D7E5F3;      /* 浅蓝分隔线（贴合浅蓝面） */

  /* ---------- 语义色 ---------- */
  --xy-ok: #2F6B4F;
  --xy-ok-soft: #E4F1E9;
  --xy-ok-line: #C4DFD1;
  --xy-warn: #8A6220;
  --xy-warn-soft: #FAF0D8;
  --xy-warn-line: #E8D3A8;
  --xy-danger: #9C3B30;
  --xy-danger-soft: #F8E5E1;
  --xy-danger-line: #E6C4BC;
  /* 差异对比专用的深浅文字色（在 soft 底上仍需 AA） */
  --xy-ok-ink: #23513A;
  --xy-danger-ink: #7C2D24;
  --xy-paper-warm: #F6F0E6;

  /* ---------- 间距（4 的倍数，唯一标尺） ---------- */
  --xy-s1: 4px;
  --xy-s2: 8px;
  --xy-s3: 12px;
  --xy-s4: 16px;
  --xy-s5: 20px;
  --xy-s6: 24px;
  --xy-s7: 32px;
  --xy-s8: 40px;
  --xy-s9: 56px;
  --xy-s10: 72px;

  /* ---------- 圆角 ---------- */
  --xy-r-xs: 6px;
  --xy-r-sm: 9px;
  --xy-r-md: 13px;
  --xy-r-lg: 18px;
  --xy-r-xl: 26px;
  --xy-r-pill: 999px;

  /* ---------- 阴影（统一冷调，不叠多层） ---------- */
  --xy-shadow-1: 0 1px 2px rgba(27, 51, 80, 0.05);
  --xy-shadow-2: 0 2px 10px rgba(27, 51, 80, 0.07);
  --xy-shadow-3: 0 10px 30px rgba(27, 51, 80, 0.12);
  --xy-focus-ring: 0 0 0 3px rgba(63, 127, 185, 0.35);

  /* ---------- 字体 ---------- */
  --xy-font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Segoe UI", system-ui, sans-serif;
  --xy-font-mono: "Cascadia Mono", "Consolas", "SFMono-Regular", "Courier New", monospace;

  /* 字号阶梯：正文 15.5px，行高 1.72（中文长文阅读） */
  --xy-fs-xs: 12px;
  --xy-fs-sm: 13px;
  --xy-fs-base: 15.5px;
  --xy-fs-md: 17px;
  --xy-fs-lg: 20px;
  --xy-fs-xl: 25px;
  --xy-fs-2xl: 31px;
  --xy-fs-3xl: 38px;

  --xy-lh-tight: 1.3;
  --xy-lh-normal: 1.55;
  --xy-lh-relaxed: 1.72;

  /* ---------- 布局 ---------- */
  --xy-w-page: 1140px;          /* 工作台内容宽 */
  --xy-w-reading: 720px;        /* 长文阅读宽 */
  --xy-header-h: 62px;
  --xy-z-header: 50;
  --xy-z-companion: 60;
  --xy-z-modal: 100;
  --xy-z-toast: 120;

  /* ---------- 动效 ---------- */
  --xy-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --xy-t-fast: 120ms;
  --xy-t-base: 200ms;
}

/* ============================================================================
   基础重置与排版
   ============================================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--xy-paper);
  color: var(--xy-ink);
  font-family: var(--xy-font);
  font-size: var(--xy-fs-base);
  line-height: var(--xy-lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--xy-blue-700);
  line-height: var(--xy-lh-tight);
  letter-spacing: 0.01em;
  margin: 0 0 var(--xy-s3);
}

p { margin: 0 0 var(--xy-s3); }
ul, ol { margin: 0 0 var(--xy-s3); padding-left: 1.35em; }
li { margin: var(--xy-s1) 0; }

a { color: var(--xy-blue-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--xy-blue-700); }

img, picture, svg { max-width: 100%; }
img { height: auto; }

hr { border: 0; border-top: 1px solid var(--xy-line); margin: var(--xy-s5) 0; }

small { font-size: var(--xy-fs-xs); color: var(--xy-ink-3); }

/* 统一焦点指示：键盘可达性基线，任何交互元素都必须保留 */
:focus-visible {
  outline: 2.5px solid var(--xy-blue-500);
  outline-offset: 2px;
  border-radius: var(--xy-r-xs);
}

/* 视觉隐藏但保留给读屏器 */
.xy-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}