/* ==========================================================================
   设计 token —— 全站唯一的样式事实来源
   --------------------------------------------------------------------------
   规则：组件样式只消费这里的变量，不得写死颜色与尺寸。
   主题通过覆盖这些变量来改变外观（见 docs/THEME-DESIGN.md §2、§6）。

   ⚠ 整份文件被包在 @layer tokens 里，这是主题能生效的前提：
   本文件里定义暗色用的是 `:root[data-theme="dark"]`（特异性 0,2,0），
   而主题覆盖写的是 `:root`（特异性 0,1,0）。若无层级隔离，
   内置的暗色规则会永远压过主题的覆盖——实测正是如此，
   表现为「主题 CSS 加载了，但颜色完全没变」。
   放进 cascade layer 后，未分层的主题样式无条件胜出，
   主题作者只需写最朴素的 `:root { --brand-500: ... }` 即可。
   ========================================================================== */

@layer tokens {

:root {
  /* --- 间距（8 的倍数体系） --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* --- 圆角 --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 999px;

  /* --- 字号与行高 --- */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;

  --leading-tight: 1.3;
  --leading-snug: 1.5;
  --leading-normal: 1.75;
  --leading-relaxed: 1.8;

  /* --- 阴影（柔和多层，避免纯黑） --- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .04);
  --shadow-lg: 0 12px 28px rgba(16, 24, 40, .10), 0 4px 8px rgba(16, 24, 40, .05);
  --shadow-xl: 0 24px 48px rgba(16, 24, 40, .12);

  /* --- 动效 --- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;

  /* --- 字体栈 ---
     中文优先用自托管的 Noto Sans SC（见 fonts.css，按 unicode-range 切片）：
     注意 system-ui 这类泛型族带有隐式的按文字回退（Windows 上会直接命中雅黑），
     放在 webfont 前会让 Noto 永远用不上，因此不能出现在它之前。
     Mac 用户在 PingFang 一档命中（观感更好）；Windows 中文不再落到雅黑；
     代码用自托管 JetBrains Mono（latin），中文注释回退到系统字体。 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Noto Sans SC", "HarmonyOS Sans SC", "MiSans",
    "Microsoft YaHei", sans-serif;
  --font-serif: "Source Han Serif SC", "Noto Serif SC", Georgia, serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", "Fira Code", Consolas,
    "Noto Sans SC", monospace;
  /* Logo 字标专用展示字体：小赖字体 Xiaolai SC（OFL，自托管子集仅 12KB，
     见 fonts.css 与 static/fonts/xiaolai/），软笔手写风。
     缺字时依次回退得意黑（同为 OFL 自托管子集）、庆科黄油体、Noto Sans SC。 */
  --font-logo: "Xiaolai SC", "Smiley Sans", "ZCOOL QingKe HuangYou", "Noto Sans SC", "PingFang SC",
    "Microsoft YaHei", sans-serif;

  /* --- 布局 --- */
  --container-max: 1320px;
  --content-max: 48rem; /* 正文 768px，落在 680-800px 舒适行宽区间 */
  --sidebar-width: 300px;

  /* --- 配色（vulnspace 默认皮肤） --- */
  --brand-500: #2563eb;
  --brand-600: #1d4ed8;
  --accent-500: #06b6d4;

  /* --- Logo 字标专用：高级精致蓝 ---
     亮色主题：深海军蓝 → 宝蓝 → 亮蓝，全程收在蓝色色相内（不再掺青色），
     拉开明度层次才有「金属光泽」的高级感；流光用白色高光扫过字面。
     暗色主题整体提亮，保证深底上的可读性与同样的层次感。 */
  --logo-grad-a: #0a2a66;
  --logo-grad-b: #1d50c8;
  --logo-grad-c: #4e8cf9;
  --logo-sheen: rgba(255, 255, 255, .65);
  --logo-sub-color: color-mix(in srgb, var(--text-muted) 60%, var(--brand-500));

  --bg-body: #f6f8fb;
  --bg-surface: #ffffff;
  --bg-muted: #eef2f7;

  --text-strong: #16202e;
  --text-body: #3d4b5c;
  --text-muted: #7a8798;
  --text-on-brand: #ffffff;

  --border: #e6ebf2;
  --border-strong: #d3dbe6;

  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #dc2626;

  --focus-ring: 0 0 0 3px rgba(37, 99, 235, .35);

  /* --- 代码块配色 ---
     技术博客的核心可读性在这套颜色上：深底浅字、对比度足够，
     且与页面底色明显区分，让代码块一眼可辨。 */
  --color-code-bg: #0f172a;
  --color-code-fg: #e2e8f0;
  --color-code-inline: #b91c1c;
}

/* 暗色皮肤：不是简单反色，而是独立配色 */
:root[data-theme="dark"] {
  --bg-body: #0f1620;
  --bg-surface: #18202c;
  --bg-muted: #212b39;

  --text-strong: #eef2f7;
  --text-body: #b6c2d4;
  --text-muted: #7d8b9e;

  --brand-500: #60a5fa;
  --brand-600: #93c5fd;
  --accent-500: #22d3ee;

  /* Logo 字标：暗色下用「浅蓝高光 → 中蓝 → 饱和蓝」的顺序，
     让字标在深底上像被顶光打亮，保持与亮色主题一致的高级感 */
  --logo-grad-a: #c3dbff;
  --logo-grad-b: #86adff;
  --logo-grad-c: #5f8ef7;
  --logo-sheen: rgba(255, 255, 255, .45);
  --logo-sub-color: color-mix(in srgb, var(--text-muted) 55%, var(--brand-500));

  --border: #263241;
  --border-strong: #33445a;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .30);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .25);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .35), 0 2px 4px rgba(0, 0, 0, .25);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, .40), 0 4px 8px rgba(0, 0, 0, .28);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, .45);

  --focus-ring: 0 0 0 3px rgba(96, 165, 250, .40);

  /* 暗色下代码块底色比页面再深一档，形成层次而不是糊在一起 */
  --color-code-bg: #0a1120;
  --color-code-fg: #dbeafe;
  --color-code-inline: #fca5a5;
}

/* 尊重系统的「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}

} /* @layer tokens */