/* ============================================================
 * 汉设计系统 · 设计令牌 (Design Tokens)
 * 所有变量使用 --dq- 前缀
 * ============================================================ */

:root {

  /* ========================================================
   * 一、色彩体系 (Color Palette)
   * ====================================================== */

  /* ---------- 1.1 主色：朱红 (Vermilion) ----------
   * 朱砂色，取自中国传统印章用朱。
   * 代表权威、诚信、喜庆，是汉的灵魂色。
   * 仅用于关键 CTA、印章、强调标记，占比建议 ≤ 5%。 */
  --dq-color-vermilion-50:  #fdf2f0;
  --dq-color-vermilion-100: #fbe3de;
  --dq-color-vermilion-200: #f5c6bb;
  --dq-color-vermilion-300: #ee9f8e;
  --dq-color-vermilion-400: #e46e55;
  --dq-color-vermilion-500: #c0392b;  /* ★ 主色：印章朱 */
  --dq-color-vermilion-600: #a92d22;
  --dq-color-vermilion-700: #8a251b;
  --dq-color-vermilion-800: #6b1d15;
  --dq-color-vermilion-900: #4e1410;

  /* ---------- 1.2 主色：靛蓝 (Indigo) ----------
   * 深藏青、青花瓷色。
   * 代表沉静、智慧、高远意境。
   * 用于标题文字、导航栏、链接。 */
  --dq-color-indigo-50:  #f0f3f7;
  --dq-color-indigo-100: #dde4ee;
  --dq-color-indigo-200: #b9c7dc;
  --dq-color-indigo-300: #8fa3c5;
  --dq-color-indigo-400: #5e76a6;
  --dq-color-indigo-500: #3a5285;  /* ★ 主色：墨蓝 */
  --dq-color-indigo-600: #2c3f6a;
  --dq-color-indigo-700: #223253;
  --dq-color-indigo-800: #1a2740;
  --dq-color-indigo-900: #121c2e;

  /* ---------- 1.3 主色：金色 (Gold) ----------
   * 古金色、金箔色。
   * 代表尊贵、典雅、高端。
   * 用于装饰线条、印章边框、奖项标记。 */
  --dq-color-gold-50:  #fdf8ed;
  --dq-color-gold-100: #f9edcf;
  --dq-color-gold-200: #f2d89a;
  --dq-color-gold-300: #e9be64;
  --dq-color-gold-400: #dfa441;
  --dq-color-gold-500: #c68a2e;  /* ★ 主色：古金 */
  --dq-color-gold-600: #a67224;
  --dq-color-gold-700: #82581c;
  --dq-color-gold-800: #5f4014;
  --dq-color-gold-900: #3e2a0d;

  /* ---------- 1.4 主色：墨色 (Ink) ----------
   * 松烟墨、墨锭色。
   * 汉系统最核心的色彩，承载文字与结构。
   * 从浓墨到淡墨共 10 级，模拟墨在水中的溶解层次。 */
  --dq-color-ink-50:  #f7f6f3;   /* 极淡墨：背景微染 */
  --dq-color-ink-100: #ecebe6;   /* 淡墨：分割线、次级背景 */
  --dq-color-ink-200: #d8d6cf;   /* 清墨：边框、装饰 */
  --dq-color-ink-300: #b5b2a9;   /* 浅墨：次要文字 */
  --dq-color-ink-400: #8a867d;   /* 中墨：说明文字 */
  --dq-color-ink-500: #5e5a53;   /* 墨色：正文 */
  --dq-color-ink-600: #3e3b36;   /* 深墨：小标题 */
  --dq-color-ink-700: #2a2824;   /* 浓墨：大标题 */
  --dq-color-ink-800: #1a1916;   /* 焦墨：强调文字 */
  --dq-color-ink-900: #0d0c0a;   /* 宿墨：最深对比 */

  /* ---------- 1.5 主色：宣纸白 (Rice Paper) ----------
   * 安徽泾县宣纸色，略带暖黄。
   * 整个系统的底色，温和不刺眼。 */
  --dq-color-paper-50:  #fdfbf5;  /* 最白宣纸 */
  --dq-color-paper-100: #faf6ea;  /* ★ 默认宣纸底 */
  --dq-color-paper-200: #f4eedb;  /* 旧宣纸 */
  --dq-color-paper-300: #ebe2c4;  /* 年久宣纸 */
  --dq-color-paper-400: #ddcfa4;  /* 古旧宣纸 */

  /* ---------- 1.6 辅助色 (Accent) ----------
   * 青瓷色：取自宋代龙泉窑。
   * 竹青色：取翠竹之色。
   * 赭石：取自国画颜料。 */
  --dq-color-celadon:  #6fa68c;   /* 青瓷：辅助强调 */
  --dq-color-bamboo:   #4a7c59;   /* 竹青：自然主题 */
  --dq-color-ochre:    #b57152;   /* 赭石：复古/山水 */
  --dq-color-lapis:    #2f4858;   /* 青金石：高端深色 */

  /* ---------- 1.7 功能色 (Functional) ----------
   * 用于状态提示、确认、警告、错误。 */
  --dq-color-success:  #4a7c59;   /* 成功：竹青色 */
  --dq-color-warning:  #c68a2e;   /* 警告：金色 */
  --dq-color-danger:   #c0392b;   /* 错误：朱红色 */
  --dq-color-info:     #3a5285;   /* 信息：靛蓝色 */

  /* ---------- 1.8 语义化色彩映射 ---------- */
  --dq-color-text-primary:   var(--dq-color-ink-700);   /* 主要文字 */
  --dq-color-text-secondary: var(--dq-color-ink-500);   /* 次要文字 */
  --dq-color-text-tertiary:  var(--dq-color-ink-300);   /* 辅助文字 */
  --dq-color-text-inverse:   var(--dq-color-paper-100); /* 反色文字 */
  --dq-color-bg:             var(--dq-color-paper-100); /* 页面背景 */
  --dq-color-bg-surface:     var(--dq-color-paper-50);  /* 卡片背景 */
  --dq-color-bg-elevated:    var(--dq-color-paper-200); /* 悬浮背景 */
  --dq-color-bg-dark:        var(--dq-color-ink-800);   /* 深色区域背景 */
  --dq-color-border:         var(--dq-color-ink-200);   /* 默认边框 */
  --dq-color-border-strong:  var(--dq-color-ink-400);   /* 强边框 */
  --dq-color-accent:         var(--dq-color-vermilion-500); /* 强调色 */

  /* ========================================================
   * 二、字体体系 (Typography)
   * ====================================================== */

  /* ---------- 2.1 字体栈 (Font Family) ---------- */
  --dq-font-serif: "KaiTi", "STKaiti", "楷体", "Noto Serif SC", "Songti SC", serif;
  --dq-font-sans:  "PingFang SC", "Source Han Sans CN", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --dq-font-mono:  "SF Mono", "JetBrains Mono", "Fira Code", "Consolas", monospace;
  --dq-font-kai:   "KaiTi", "STKaiti", "楷体", "LXGW WenKai", serif;
  --dq-font-song:  "Songti SC", "SimSun", "宋体", "Noto Serif SC", serif;

  /* ---------- 2.2 字号 (Font Size) ----------
   * 基于 16px 基准，遵循 1.25 比例阶跃。 */
  --dq-fs-xs:      12px;   /* 辅助说明 */
  --dq-fs-sm:      14px;   /* 次要文字 */
  --dq-fs-base:    16px;   /* 正文 */
  --dq-fs-md:      18px;   /* 小标题 */
  --dq-fs-lg:      20px;   /* 大标题 */
  --dq-fs-xl:      24px;   /* 二级标题 */
  --dq-fs-2xl:     30px;   /* 一级标题 */
  --dq-fs-3xl:     38px;   /* 大标题 */
  --dq-fs-4xl:     48px;   /* 展示标题 */
  --dq-fs-5xl:     64px;   /* Hero 书法标题 */
  --dq-fs-6xl:     80px;   /* 超大书法 */

  /* ---------- 2.3 字重 (Font Weight) ---------- */
  --dq-fw-light:   300;
  --dq-fw-regular: 400;
  --dq-fw-medium:  500;
  --dq-fw-bold:    700;

  /* ---------- 2.4 行高 (Line Height) ---------- */
  --dq-lh-tight:   1.1;   /* 书法标题 */
  --dq-lh-snug:    1.3;   /* 标题 */
  --dq-lh-normal:  1.5;   /* 正文 */
  --dq-lh-relaxed: 1.8;   /* 长段落 */
  --dq-lh-loose:   2.2;   /* 诗词 */

  /* ---------- 2.5 字间距 (Letter Spacing) ---------- */
  --dq-ls-tight:   -0.02em;
  --dq-ls-normal:   0;
  --dq-ls-wide:     0.05em;
  --dq-ls-wider:    0.1em;   /* 标题 */
  --dq-ls-widest:   0.3em;   /* 书法落款 */

  /* ========================================================
   * 三、间距体系 (Spacing)
   * 基于 4px 基础单位，倍数关系清晰。
   * ====================================================== */
  --dq-space-1:   4px;
  --dq-space-2:   8px;
  --dq-space-3:   12px;
  --dq-space-4:   16px;
  --dq-space-5:   24px;
  --dq-space-6:   32px;
  --dq-space-7:   48px;
  --dq-space-8:   64px;
  --dq-space-9:   80px;
  --dq-space-10:  96px;
  --dq-space-12:  128px;
  --dq-space-16:  192px;

  /* ---------- 布局间距 ---------- */
  --dq-gutter:     24px;   /* 栅格间距 */
  --dq-section-gap: 96px;  /* 区块间距 */

  /* ========================================================
   * 四、尺寸 (Sizing)
   * ====================================================== */
  --dq-container-sm:  640px;
  --dq-container-md:  800px;
  --dq-container-lg:  1040px;
  --dq-container-xl:  1200px;

  /* ========================================================
   * 五、圆角 (Border Radius)
   * 中国风圆角偏大但不夸张，模拟器物圆润感。
   * ====================================================== */
  --dq-radius-none: 0;
  --dq-radius-sm:   2px;   /* 印章、小标签 */
  --dq-radius-md:   4px;   /* 按钮、输入框 */
  --dq-radius-lg:   8px;   /* 卡片、卷轴 */
  --dq-radius-xl:   12px;  /* 大卡片、窗口 */
  --dq-radius-pill: 999px; /* 胶囊按钮 */

  /* ========================================================
   * 六、边框 (Border)
   * ====================================================== */
  --dq-border-width:   1px;
  --dq-border-width-2: 2px;
  --dq-border-width-3: 3px;
  --dq-border-style:   solid;
  --dq-border:         var(--dq-border-width) var(--dq-border-style) var(--dq-color-border);
  --dq-border-strong:  var(--dq-border-width-2) var(--dq-border-style) var(--dq-color-border-strong);

  /* ========================================================
   * 七、阴影 (Shadow)
   * 中国风阴影柔和克制，不用重投影。
   * ====================================================== */
  --dq-shadow-xs:     0 1px 2px rgba(26, 24, 22, 0.04);
  --dq-shadow-sm:     0 2px 4px rgba(26, 24, 22, 0.06);
  --dq-shadow-md:     0 4px 12px rgba(26, 24, 22, 0.08);
  --dq-shadow-lg:     0 8px 24px rgba(26, 24, 22, 0.10);
  --dq-shadow-xl:     0 16px 48px rgba(26, 24, 22, 0.12);
  --dq-shadow-seal:   2px 3px 6px rgba(192, 57, 43, 0.35);
  --dq-shadow-scroll: 0 6px 18px rgba(26, 24, 22, 0.08), inset 0 1px 0 rgba(255,255,255,0.5);

  /* ========================================================
   * 八、动画 (Motion)
   * ====================================================== */

  /* ---------- 8.1 缓动曲线 ---------- */
  --dq-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);   /* 墨迹扩散 */
  --dq-ease-in:    cubic-bezier(0.64, 0, 0.78, 0);
  --dq-ease-inout: cubic-bezier(0.45, 0, 0.55, 1);
  --dq-ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);  /* 印章落下 */

  /* ---------- 8.2 时长 ---------- */
  --dq-duration-fast:    100ms;
  --dq-duration-normal:  200ms;
  --dq-duration-slow:    400ms;
  --dq-duration-slower:  600ms;

  /* ---------- 8.3 关键帧 ---------- */
  @keyframes dq-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes dq-fade-in-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes dq-ink-spread {
    from { opacity: 0; transform: scale(0.8); filter: blur(8px); }
    to   { opacity: 1; transform: scale(1); filter: blur(0); }
  }

  @keyframes dq-seal-drop {
    0%   { transform: scale(1.15) rotate(-3deg); }
    60%  { transform: scale(0.95) rotate(-2deg); }
    80%  { transform: scale(1.05) rotate(-2deg); }
    100% { transform: scale(1) rotate(-2deg); }
  }

  @keyframes dq-brush-write {
    from { stroke-dashoffset: 100; }
    to   { stroke-dashoffset: 0; }
  }

  @keyframes dq-scroll-unroll {
    from { max-height: 0; opacity: 0; }
    to   { max-height: 2000px; opacity: 1; }
  }

  @keyframes dq-sway {
    0%, 100% { transform: rotate(-1deg); }
    50%      { transform: rotate(1deg); }
  }

  /* ========================================================
   * 九、层级 (Z-Index)
   * ====================================================== */
  --dq-z-base:     0;
  --dq-z-sticky:   100;
  --dq-z-overlay:  200;
  --dq-z-modal:    300;
  --dq-z-tooltip:  400;
  --dq-z-max:      999;

  /* ========================================================
   * 十、组件级变量
   * ====================================================== */

  /* ---------- 印章按钮 ---------- */
  --dq-seal-bg:        var(--dq-color-vermilion-500);
  --dq-seal-bg-hover:  var(--dq-color-vermilion-600);
  --dq-seal-text:      var(--dq-color-paper-100);
  --dq-seal-border:    var(--dq-color-gold-500);
  --dq-seal-size:      56px;
  --dq-seal-radius:    var(--dq-radius-sm);
  --dq-seal-tilt:      -3deg;

  /* ---------- 水墨导航 ---------- */
  --dq-nav-height:     64px;
  --dq-nav-bg:         var(--dq-color-paper-100);
  --dq-nav-border:     var(--dq-color-ink-200);
  --dq-nav-text:       var(--dq-color-ink-500);
  --dq-nav-text-hover: var(--dq-color-ink-700);
  --dq-nav-ink-width:  0;
  --dq-nav-ink-color:  var(--dq-color-ink-700);

  /* ---------- 卷轴卡片 ---------- */
  --dq-scroll-bg:      var(--dq-color-paper-100);
  --dq-scroll-roller:  var(--dq-color-ink-700);
  --dq-scroll-rivet:    var(--dq-color-gold-500);
  --dq-scroll-shadow:   var(--dq-shadow-scroll);

  /* ---------- 印章组件 ---------- */
  --dq-stamp-bg:       var(--dq-color-vermilion-500);
  --dq-stamp-text:     var(--dq-color-paper-100);
  --dq-stamp-size:     48px;
  --dq-stamp-font:     var(--dq-fs-base);
  --dq-stamp-border-radius: var(--dq-radius-sm);

}

/* ============================================================
 * 深色主题 (Dark Theme)
 * ====================================================== */
[data-theme='dark'] {
  --dq-color-text-primary:   var(--dq-color-paper-50);
  --dq-color-text-secondary: var(--dq-color-paper-200);
  --dq-color-text-tertiary:  var(--dq-color-ink-300);
  --dq-color-text-inverse:   var(--dq-color-ink-700);
  --dq-color-bg:             var(--dq-color-ink-800);
  --dq-color-bg-surface:     var(--dq-color-ink-700);
  --dq-color-bg-elevated:    var(--dq-color-ink-600);
  --dq-color-border:         var(--dq-color-ink-500);
}