/* ==========================================================================
   青花狸 V2 · Design System — Layer 1: Tokens
   --------------------------------------------------------------------------
   设计概念：「釉与瓷」(Glaze & Porcelain)
   从 V1 的「纸上印刷」升级到「青瓷釉面」：
     · 釉光  —— 主色钴蓝保留品牌资产，按钮/卡片加极细顶部高光 + 冷调投影
     · 纸感  —— 大面积留白加 2% 噪点纹理，避免死白（SVG 内联，零请求）
     · 冰裂纹—— 青花瓷的釉裂纹做深色区块底纹，与品牌强关联，非廉价渐变
     · 冰蓝墨—— 正文主色从纯黑换为近黑靛 #101A26，带釉色温度

   铁律：任何组件不得写死颜色与像素，必须引用本文件的 token。
   ========================================================================== */

:root {
  /* ---------- 品牌色：青花钴蓝（釉） ---------- */
  --brand-950: #0A1F38;
  --brand-900: #11355A;
  --brand-800: #164471;
  --brand-700: #1D4E89;   /* 主色 */
  --brand-600: #2C66A8;
  --brand-500: #4A85C4;
  --brand-400: #7FA9D8;
  --brand-200: #C6DAEE;
  --brand-100: #E4EEF8;
  --brand-50:  #F1F6FC;

  /* 釉面高光：仅用于主按钮 / 关键卡片的顶部 1px 内阴影 */
  --glaze-light: rgba(255, 255, 255, .28);
  --glaze-deep:  rgba(8, 26, 48, .22);

  /* ---------- 辅助色：狸猫赭（釉裂 · 点缀 < 5%） ---------- */
  --accent-700: #8E4520;
  --accent-600: #A8562A;
  --accent-500: #C2713F;
  --accent-300: #DFA97C;
  --accent-200: #EFD2BA;
  --accent-100: #F9EFE6;

  /* ---------- 中性色（带釉色温度，非纯灰） ---------- */
  --ink-900: #101A26;   /* 主文字：冰蓝墨 */
  --ink-800: #1A2531;
  --ink-700: #26323F;
  --ink-600: #3C4856;
  --ink-500: #55616F;
  --ink-400: #6A7482;
  --ink-300: #8C96A3;
  --ink-200: #C7CDD5;

  --line:      #E3E7EC;
  --line-soft: #EEF1F5;
  --line-soft-2: #F4F6F9;
  --line-dark: rgba(255, 255, 255, .13);
  --line-dark-soft: rgba(255, 255, 255, .07);

  /* ---------- 表面与背景 ---------- */
  --surface:   #FFFFFF;
  --surface-2: #F7F8FA;
  --bg:        #FBFBFA;
  --bg-2:      #F4F6F8;
  --bg-dark:   #0D141C;
  --bg-dark-2: #121A23;
  --bg-dark-3: #18222D;

  /* ---------- 语义色 ---------- */
  --ok:        #25705A;
  --ok-bg:     #E7F2ED;
  --ok-line:   #BFDCD1;
  --warn:      var(--accent-600);
  --warn-bg:   var(--accent-100);
  --warn-line: var(--accent-200);
  --info:      var(--brand-700);
  --info-bg:   var(--brand-50);
  --info-line: var(--brand-200);
  --danger:    #A63A32;
  --danger-bg: #FBEDEC;
  --danger-line:#EAC7C4;

  /* ---------- 字体 ---------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Source Han Sans SC", "Noto Sans SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
    Menlo, Consolas, "Liberation Mono", monospace;

  /* ---------- 字号层级（模块化 1.25 阶，display 放大做视觉锚点） ---------- */
  --t-display: clamp(2.75rem, 1.2rem + 5.2vw, 5rem);
  --t-h1:      clamp(2.125rem, 1.35rem + 2.6vw, 3.25rem);
  --t-h2:      clamp(1.625rem, 1.25rem + 1.3vw, 2.125rem);
  --t-h3:      clamp(1.1875rem, 1.08rem + .36vw, 1.375rem);
  --t-h4:      1.0625rem;
  --t-lead:    clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
  --t-body:    1rem;
  --t-sm:      .875rem;
  --t-xs:      .8125rem;
  --t-micro:   .75rem;

  --lh-tight: 1.1;
  --lh-snug:  1.32;
  --lh-base:  1.74;

  --ls-tight: -.024em;
  --ls-normal: 0;
  --ls-wide:  .06em;
  --ls-wider: .12em;

  /* ---------- 间距（4px 基准） ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-9: 40px;
  --s-10: 48px;
  --s-11: 64px;
  --s-12: 80px;
  --s-13: 96px;
  --s-14: 128px;

  /* ---------- 圆角（克制） ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* ---------- 阴影（釉面：冷调、低饱和、带内高光） ---------- */
  --sh-xs: 0 1px 2px rgba(16, 26, 38, .05);
  --sh-sm: 0 1px 2px rgba(16, 26, 38, .05), 0 2px 6px rgba(16, 26, 38, .04);
  --sh-md: 0 2px 4px rgba(16, 26, 38, .04), 0 8px 20px rgba(16, 26, 38, .06);
  --sh-lg: 0 4px 8px rgba(16, 26, 38, .05), 0 18px 44px rgba(16, 26, 38, .09);
  --sh-xl: 0 8px 16px rgba(16, 26, 38, .06), 0 32px 72px rgba(16, 26, 38, .12);
  --sh-glaze: inset 0 1px 0 var(--glaze-light), 0 2px 8px var(--glaze-deep);
  --sh-focus: 0 0 0 3px rgba(44, 102, 168, .38);

  /* ---------- 动效（150–300ms 硬约束） ---------- */
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;
  --dur-4: 300ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.32, .48, 1);

  /* ---------- 布局 ---------- */
  --nav-h: 68px;
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: 24px;
  --grid-gap: 24px;

  /* ---------- 纹理（内联 SVG，零请求） ---------- */
  /* 纸感噪点：2% 不透明度，作用于大面积浅色区 */
  --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  /* 冰裂纹：青花瓷釉裂网 */
  --tex-crackle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='.7' stroke-linecap='round'%3E%3Cpath d='M0 42 L38 30 74 52 120 34 168 58 200 46 240 66'/%3E%3Cpath d='M38 30 46 74 26 104 54 140 40 178 68 214 60 240'/%3E%3Cpath d='M120 34 130 70 112 104 140 128 128 164 160 190 152 240'/%3E%3Cpath d='M200 46 208 88 186 118 214 150 200 186 226 218'/%3E%3Cpath d='M74 52 92 84M168 58 152 96M26 104 62 110M186 118 148 112M54 140 90 132M214 150 178 160M128 164 96 156M40 178 78 186M160 190 196 182M68 214 104 200'/%3E%3Cpath d='M46 74 92 84 130 70 152 96 208 88M62 110 90 132 148 112 178 160M96 156 128 164 178 160 196 182'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   主题切换（跟随系统 + 手动覆盖）
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink-900: #EAF0F6;
    --ink-800: #DDE5ED;
    --ink-700: #C6D0DA;
    --ink-600: #AAB6C2;
    --ink-500: #8D9AA8;
    --ink-400: #7C8896;
    --ink-300: #63707E;
    --ink-200: #455260;

    --line: #26313D;
    --line-soft: #1E2731;
    --line-soft-2: #18202A;

    --surface: #131C25;
    --surface-2: #18222D;
    --bg: #0D141C;
    --bg-2: #101922;

    --ok-bg: #142A22;
    --ok-line: #204437;
    --warn-bg: #2A1D13;
    --warn-line: #443020;
    --info-bg: #12212F;
    --info-line: #1F3A54;
    --danger-bg: #2A1614;
    --danger-line: #472522;

    --sh-xs: 0 1px 2px rgba(0, 0, 0, .3);
    --sh-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .22);
    --sh-md: 0 2px 4px rgba(0, 0, 0, .28), 0 8px 20px rgba(0, 0, 0, .3);
    --sh-lg: 0 4px 8px rgba(0, 0, 0, .3), 0 18px 44px rgba(0, 0, 0, .38);
    --sh-xl: 0 8px 16px rgba(0, 0, 0, .32), 0 32px 72px rgba(0, 0, 0, .45);
    --glaze-light: rgba(255, 255, 255, .16);
    --glaze-deep: rgba(0, 0, 0, .35);
    --sh-focus: 0 0 0 3px rgba(122, 169, 216, .5);
  }
}

/* 手动浅色覆盖：强制还原亮色 token */
:root[data-theme="light"] {
  color-scheme: light;
}

/* 手动深色覆盖 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink-900: #EAF0F6;
  --ink-800: #DDE5ED;
  --ink-700: #C6D0DA;
  --ink-600: #AAB6C2;
  --ink-500: #8D9AA8;
  --ink-400: #7C8896;
  --ink-300: #63707E;
  --ink-200: #455260;
  --line: #26313D;
  --line-soft: #1E2731;
  --line-soft-2: #18202A;
  --surface: #131C25;
  --surface-2: #18222D;
  --bg: #0D141C;
  --bg-2: #101922;
  --ok-bg: #142A22;
  --ok-line: #204437;
  --warn-bg: #2A1D13;
  --warn-line: #443020;
  --info-bg: #12222F;
  --info-line: #1F3A54;
  --danger-bg: #2A1614;
  --danger-line: #472522;
  --sh-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --sh-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .22);
  --sh-md: 0 2px 4px rgba(0, 0, 0, .28), 0 8px 20px rgba(0, 0, 0, .3);
  --sh-lg: 0 4px 8px rgba(0, 0, 0, .3), 0 18px 44px rgba(0, 0, 0, .38);
  --sh-xl: 0 8px 16px rgba(0, 0, 0, .32), 0 32px 72px rgba(0, 0, 0, .45);
  --glaze-light: rgba(255, 255, 255, .16);
  --glaze-deep: rgba(0, 0, 0, .35);
  --sh-focus: 0 0 0 3px rgba(122, 169, 216, .5);
}