@charset "UTF-8";
/* ==========================================================================
   miniBlog · 设计令牌（Design Tokens）
   --------------------------------------------------------------------------
   配比：90% 中性信息层 / 9% 镍青功能层 / 1% 铜痕活性信号
   - 层次来自明度，不依赖重阴影
   - 铜色只用于稀缺信号：eyebrow、精选标记、TOC 当前项、按钮强调
   - 颗粒纹理仅用于 Hero / 顶层材质；低耗模式下关闭
   使用方法：所有颜色 / 字体 / 字号 / 间距 / 阴影 / 动效只引用 --cn-* 变量。
   主题：默认亮色；<html data-theme="dark"> 切换暗色。
   低耗：<html data-performance="low"> 关闭纹理 / 毛玻璃 / 装饰动画。
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- 色板 · 灰阶（信息层 90%） ------------------------------------------- */
  --cn-gray-50: #F7F8F6;
  --cn-gray-100: #EFF1EE;
  --cn-gray-200: #E0E4E0;
  --cn-gray-300: #C9D0CA;
  --cn-gray-400: #A5AFA8;
  --cn-gray-500: #7B8780;
  --cn-gray-600: #59645E;
  --cn-gray-700: #404944;
  --cn-gray-800: #2C332F;
  --cn-gray-900: #1B211E;

  /* ---- 色板 · 镍青功能层（9%） --------------------------------------------- */
  --cn-accent-300: #8EA8AA;
  --cn-accent-400: #6F8B8E;
  --cn-accent-500: #48646A;
  --cn-accent-600: #365158;
  --cn-accent-700: #2A4247;

  /* ---- 色板 · 铜痕信号（1%） ----------------------------------------------- */
  --cn-copper-300: #CDB89E;
  --cn-copper-400: #B1987C;
  --cn-copper-500: #967C60;
  --cn-copper-600: #7C634B;

  /* ---- 语义色 -------------------------------------------------------------- */
  --cn-bg-primary: #FCFCFB;
  --cn-bg-secondary: var(--cn-gray-50);
  --cn-bg-tertiary: var(--cn-gray-100);
  --cn-bg-inset: #F4F6F2;
  --cn-text-primary: var(--cn-gray-900);
  --cn-text-secondary: var(--cn-gray-600);
  --cn-text-tertiary: var(--cn-gray-500);
  --cn-text-inverse: #F2F5F2;
  --cn-border-primary: var(--cn-gray-200);
  --cn-border-secondary: var(--cn-gray-300);
  --cn-border-strong: var(--cn-gray-400);
  --cn-accent-primary: var(--cn-accent-500);
  --cn-accent-hover: var(--cn-accent-600);
  --cn-accent-active: var(--cn-accent-700);
  --cn-accent-soft: rgba(72, 100, 106, 0.06);
  --cn-on-accent: #FFFFFF;
  --cn-success: #27735A;
  --cn-warning: #946015;
  --cn-error: #A44742;
  --cn-info: var(--cn-accent-500);
  --cn-selection-bg: rgba(72, 100, 106, 0.18);

  /* ---- 交互态 -------------------------------------------------------------- */
  --cn-interactive-hover: rgba(72, 100, 106, 0.085);
  --cn-interactive-active: rgba(72, 100, 106, 0.14);
  --cn-focus-ring: rgba(72, 100, 106, 0.18);
  --cn-focus-outline: var(--cn-accent-500);
  --cn-overlay: rgba(24, 30, 27, 0.46);
  --cn-overlay-soft: rgba(24, 30, 27, 0.18);

  /* ---- 表格 / 进度 / 开关 --------------------------------------------------- */
  --cn-table-header-bg: #E9EDE9;
  --cn-table-row-hover: rgba(72, 100, 106, 0.065);
  --cn-table-row-selected: rgba(72, 100, 106, 0.11);
  --cn-progress-track: #DDE3DE;
  --cn-switch-track: #B8C2BB;
  --cn-switch-knob: #FCFCFB;

  /* ---- 标签色 -------------------------------------------------------------- */
  --cn-tag-accent-bg: rgba(72, 100, 106, 0.09);
  --cn-tag-accent-text: #365158;
  --cn-tag-accent-border: rgba(72, 100, 106, 0.2);
  --cn-tag-copper-bg: rgba(150, 124, 96, 0.09);
  --cn-tag-copper-text: #7C634B;
  --cn-tag-copper-border: rgba(150, 124, 96, 0.24);
  --cn-tag-success-bg: rgba(39, 115, 90, 0.08);
  --cn-tag-success-text: var(--cn-success);
  --cn-tag-success-border: rgba(39, 115, 90, 0.18);
  --cn-tag-warning-bg: rgba(148, 96, 21, 0.08);
  --cn-tag-warning-text: var(--cn-warning);
  --cn-tag-warning-border: rgba(148, 96, 21, 0.18);
  --cn-tag-error-bg: rgba(164, 71, 66, 0.08);
  --cn-tag-error-text: var(--cn-error);
  --cn-tag-error-border: rgba(164, 71, 66, 0.18);

  /* ---- 镍层材质（仅顶层材质使用） ------------------------------------------- */
  --cn-layer-gradient: linear-gradient(125deg,
      rgba(252, 252, 251, 0.98) 0%,
      rgba(247, 248, 246, 0.96) 38%,
      rgba(239, 241, 238, 0.94) 66%,
      rgba(247, 248, 246, 0.96) 100%);
  --cn-layer-highlight: rgba(255, 255, 255, 0.86);
  --cn-layer-border: rgba(201, 208, 202, 0.62);
  --cn-layer-shadow: 0 1px 2px rgba(27, 33, 30, 0.025), inset 0 1px 0 var(--cn-layer-highlight);

  /* ---- 轧纹颗粒（仅 Hero / 顶层材质，透明度 ≤ 0.035） ----------------------- */
  --cn-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  --cn-grain-opacity: 0.035;
  --cn-grain-blend: multiply;
  --cn-brush: repeating-linear-gradient(0deg, rgba(64, 73, 68, 0.018) 0, rgba(64, 73, 68, 0.018) 1px, transparent 1px, transparent 3px);

  /* ---- 氧化层透明（毛玻璃，仅用于覆盖层 / 顶层） ---------------------------- */
  --cn-acrylic-bg: rgba(252, 252, 251, 0.72);
  --cn-acrylic-blur: 22px;
  --cn-acrylic-saturate: 145%;
  --cn-scene-border: rgba(255, 255, 255, 0.42);
  --cn-scene-shadow: 0 16px 40px rgba(9, 20, 22, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.32);

  /* ---- 字体 ---------------------------------------------------------------- */
  --cn-font-sans: 'IBM Plex Sans', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cn-font-mono: 'IBM Plex Mono', 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;
  --cn-font-serif: 'Noto Serif SC', Georgia, serif;

  /* ---- 字号 ---------------------------------------------------------------- */
  --cn-text-2xs: 11px;
  --cn-text-xs: 12px;
  --cn-text-sm: 14px;
  --cn-text-base: 16px;
  --cn-text-lg: 18px;
  --cn-text-xl: 20px;
  --cn-text-2xl: 25px;
  --cn-text-3xl: 31px;
  --cn-text-4xl: 38px;
  --cn-text-5xl: 46px;
  --cn-font-regular: 400;
  --cn-font-medium: 500;
  --cn-font-semibold: 600;
  --cn-font-bold: 700;
  --cn-leading-tight: 1.25;
  --cn-leading-snug: 1.4;
  --cn-leading-normal: 1.5;
  --cn-leading-relaxed: 1.7;
  --cn-leading-body: 1.8;
  --cn-tracking-wide: 0.08em;
  --cn-tracking-wider: 0.12em;

  /* ---- 间距（4px 基数） ----------------------------------------------------- */
  --cn-space-1: 4px;
  --cn-space-2: 8px;
  --cn-space-3: 12px;
  --cn-space-4: 16px;
  --cn-space-5: 20px;
  --cn-space-6: 24px;
  --cn-space-7: 28px;
  --cn-space-8: 32px;
  --cn-space-10: 40px;
  --cn-space-12: 48px;
  --cn-space-16: 64px;

  /* ---- 布局尺度 ------------------------------------------------------------ */
  --cn-container-max: 1200px;
  --cn-container-narrow: 880px;
  --cn-prose-max: 720px;
  --cn-sidebar-width: 300px;
  --cn-header-height: 64px;
  --cn-radius-none: 0;

  /* ---- 阴影（克制） -------------------------------------------------------- */
  --cn-shadow-sm: 0 1px 2px rgba(27, 33, 30, 0.025);
  --cn-shadow-md: 0 3px 10px rgba(27, 33, 30, 0.045), 0 1px 2px rgba(27, 33, 30, 0.025);
  --cn-shadow-lg: 0 12px 28px rgba(27, 33, 30, 0.07), 0 2px 6px rgba(27, 33, 30, 0.035);
  --cn-input-inset-shadow: inset 0 1px 2px rgba(27, 33, 30, 0.025);
  --cn-btn-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.14);

  /* ---- 动效（只解释状态，不作装饰） ----------------------------------------- */
  --cn-duration-press: 90ms;
  --cn-duration-state: 140ms;
  --cn-duration-panel: 220ms;
  --cn-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --cn-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --cn-opacity-disabled: 0.42;

  /* ---- 代码与语法高亮（本地 highlight.js，自带配色） ------------------------ */
  --cn-code-bg: #F2F4F1;
  --cn-code-border: var(--cn-gray-200);
  --cn-code-text: var(--cn-gray-800);
  --cn-inline-code-bg: #EDF0EC;
  --cn-inline-code-text: var(--cn-gray-800);
  --cn-syn-comment: #7B8780;
  --cn-syn-keyword: #48646A;
  --cn-syn-string: #27735A;
  --cn-syn-number: #946015;
  --cn-syn-title: #365158;
  --cn-syn-function: #365158;
  --cn-syn-variable: #59645E;
  --cn-syn-attr: #967C60;
  --cn-syn-tag: #48646A;
  --cn-syn-builtin: #6F8B8E;
  --cn-syn-meta: #7B8780;
  --cn-syn-deletion: #A44742;
  --cn-syn-addition: #27735A;
  --cn-code-toolbar-bg: rgba(239, 241, 238, 0.92);

  /* ---- 骨架屏 -------------------------------------------------------------- */
  --cn-skeleton-bg: #E9ECE8;
  --cn-skeleton-shine: rgba(255, 255, 255, 0.66);

  /* ---- 滚动条 -------------------------------------------------------------- */
  --cn-scrollbar-thumb: var(--cn-gray-300);
  --cn-scrollbar-track: transparent;

  /* ---- 图片占位 / 封面 ------------------------------------------------------ */
  --cn-cover-placeholder: linear-gradient(135deg, var(--cn-gray-100) 0%, var(--cn-gray-200) 52%, var(--cn-gray-100) 100%);
}

/* ==========================================================================
   暗色主题 —— 降明度，不降可读性；铜痕提亮以维持信号强度
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --cn-bg-primary: #191D1B;
  --cn-bg-secondary: #202622;
  --cn-bg-tertiary: #29302B;
  --cn-bg-inset: #161A18;
  --cn-text-primary: #E9EDE8;
  --cn-text-secondary: #ADB7B0;
  --cn-text-tertiary: #7D8981;
  --cn-text-inverse: #191D1B;
  --cn-border-primary: #343D37;
  --cn-border-secondary: #4B5750;
  --cn-border-strong: #5D6A62;
  --cn-accent-primary: #9AB4B6;
  --cn-accent-hover: #B4C8C8;
  --cn-accent-active: #CBD9D7;
  --cn-accent-soft: rgba(154, 180, 182, 0.08);
  --cn-on-accent: #17211F;
  --cn-success: #65B89A;
  --cn-warning: #D0A15D;
  --cn-error: #D48B84;
  --cn-copper-500: #C0A586;
  --cn-copper-400: #CDB89E;
  --cn-copper-600: #9C8062;
  --cn-selection-bg: rgba(154, 180, 182, 0.22);

  --cn-interactive-hover: rgba(154, 180, 182, 0.13);
  --cn-interactive-active: rgba(154, 180, 182, 0.2);
  --cn-focus-ring: rgba(154, 180, 182, 0.24);
  --cn-focus-outline: var(--cn-accent-primary);
  --cn-overlay: rgba(0, 0, 0, 0.62);
  --cn-overlay-soft: rgba(0, 0, 0, 0.32);

  --cn-table-header-bg: #29312C;
  --cn-table-row-hover: rgba(154, 180, 182, 0.1);
  --cn-table-row-selected: rgba(154, 180, 182, 0.16);
  --cn-progress-track: #39433D;
  --cn-switch-track: #56635B;
  --cn-switch-knob: #E9EDE8;

  --cn-tag-accent-bg: rgba(154, 180, 182, 0.12);
  --cn-tag-accent-text: #B4C8C8;
  --cn-tag-accent-border: rgba(154, 180, 182, 0.24);
  --cn-tag-copper-bg: rgba(192, 165, 134, 0.12);
  --cn-tag-copper-text: #C0A586;
  --cn-tag-copper-border: rgba(192, 165, 134, 0.26);
  --cn-tag-success-bg: rgba(101, 184, 154, 0.1);
  --cn-tag-success-text: var(--cn-success);
  --cn-tag-success-border: rgba(101, 184, 154, 0.22);
  --cn-tag-warning-bg: rgba(208, 161, 93, 0.1);
  --cn-tag-warning-text: var(--cn-warning);
  --cn-tag-warning-border: rgba(208, 161, 93, 0.22);
  --cn-tag-error-bg: rgba(212, 139, 132, 0.1);
  --cn-tag-error-text: var(--cn-error);
  --cn-tag-error-border: rgba(212, 139, 132, 0.22);

  --cn-layer-gradient: linear-gradient(125deg,
      rgba(32, 38, 34, 0.98) 0%,
      rgba(38, 45, 40, 0.96) 38%,
      rgba(44, 52, 46, 0.94) 66%,
      rgba(38, 45, 40, 0.96) 100%);
  --cn-layer-highlight: rgba(233, 237, 232, 0.08);
  --cn-layer-border: rgba(75, 87, 80, 0.66);
  --cn-layer-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), inset 0 1px 0 var(--cn-layer-highlight);
  --cn-grain-opacity: 0.035;
  --cn-grain-blend: screen;
  --cn-brush: repeating-linear-gradient(0deg, rgba(233, 237, 232, 0.018) 0, rgba(233, 237, 232, 0.018) 1px, transparent 1px, transparent 3px);

  --cn-acrylic-bg: rgba(25, 29, 27, 0.68);
  --cn-scene-border: rgba(213, 228, 219, 0.2);
  --cn-scene-shadow: 0 16px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);

  --cn-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.16);
  --cn-shadow-md: 0 3px 10px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.16);
  --cn-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.26), 0 2px 6px rgba(0, 0, 0, 0.18);
  --cn-input-inset-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.16);
  --cn-btn-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.1);

  --cn-code-bg: #1E2420;
  --cn-code-border: #343D37;
  --cn-code-text: #D9E0DA;
  --cn-inline-code-bg: #252C27;
  --cn-inline-code-text: #D9E0DA;
  --cn-syn-comment: #7D8981;
  --cn-syn-keyword: #9AB4B6;
  --cn-syn-string: #65B89A;
  --cn-syn-number: #D0A15D;
  --cn-syn-title: #B4C8C8;
  --cn-syn-function: #B4C8C8;
  --cn-syn-variable: #ADB7B0;
  --cn-syn-attr: #C0A586;
  --cn-syn-tag: #9AB4B6;
  --cn-syn-builtin: #8EA8AA;
  --cn-syn-meta: #7D8981;
  --cn-syn-deletion: #D48B84;
  --cn-syn-addition: #65B89A;
  --cn-code-toolbar-bg: rgba(32, 38, 34, 0.92);

  --cn-skeleton-bg: #29302B;
  --cn-skeleton-shine: rgba(233, 237, 232, 0.06);
  --cn-scrollbar-thumb: #4B5750;
  --cn-cover-placeholder: linear-gradient(135deg, #252B27 0%, #2C332F 52%, #252B27 100%);
}

/* ==========================================================================
   低耗模式 —— 保留语义与层级，移除渲染成本（噪点 / 毛玻璃 / 装饰动画）
   ========================================================================== */
[data-performance="low"] {
  --cn-grain-opacity: 0;
  --cn-acrylic-bg: var(--cn-bg-primary);
  --cn-acrylic-blur: 0px;
  --cn-acrylic-saturate: 100%;
  --cn-layer-gradient: var(--cn-bg-primary);
  --cn-layer-shadow: var(--cn-shadow-sm);
  --cn-duration-press: 0ms;
  --cn-duration-state: 0ms;
  --cn-duration-panel: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --cn-duration-press: 0.01ms;
    --cn-duration-state: 0.01ms;
    --cn-duration-panel: 0.01ms;
  }
}