/* ==========================================================================
   Wash 模板设计令牌 — Notion 风格（高级感/简约/克制）
   所有颜色、间距、圆角、阴影、字体的唯一真相来源
   暗色模式通过 [data-theme="dark"] 覆盖变量值实现
   ========================================================================== */

:root {
  /* --- 颜色 (Notion Light + 中性浅灰底) --- */
  --color-bg: #F2F3F5;
  --color-surface: #ffffff;
  --color-surface-hover: #f7f6f3;
  --color-text: #37352f;
  --color-text-secondary: #787774;
  --color-text-tertiary: #9b9a97;
  --color-primary: #2383e2;
  --color-primary-hover: #1b74ce;
  --color-accent: #448361;
  --color-accent-hover: #3b7355;
  --color-danger: #e03e3e;
  --color-warning: #d9730d;
  --color-border: rgba(55, 53, 47, .09);
  --color-border-strong: rgba(55, 53, 47, .16);
  --color-star: #d9730d;
  --color-code-bg: #f7f6f3;
  --color-code-text: #eb5757;
  --color-blockquote-bg: #f7f6f3;

  /* --- 圆角 (Notion 小圆角) --- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  /* --- 阴影 (Notion 以边框分层为主，阴影极收敛) --- */
  --shadow-sm: 0 1px 2px rgba(15, 15, 15, .06);
  --shadow-md: 0 2px 8px rgba(15, 15, 15, .08);
  --shadow-lg: 0 4px 16px rgba(15, 15, 15, .12);

  /* --- 间距 (8px 网格) --- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;

  /* --- 字体 --- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Segoe UI", "Microsoft Yahei", sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;

  /* --- 过渡 --- */
  --transition-fast: .2s ease;
  --transition-normal: .3s ease;

  /* --- 布局 --- */
  --container-max: 1200px;
  --header-height: 60px;

  /* --- 层级（均低于 layui layer 弹层 ~19891014） --- */
  --z-card-hover: 2;
  --z-tooltip: 100;
  --z-nav: 1001;
  --z-backtop: 950;
  --z-float-ad: 9999;

  /* --- 马卡龙多彩配色（区块互补：导航蓝/最近更新青蓝/广告浅黄/下载绿/文章蜜桃/友链紫） ---
     solid=小面积点缀(色条/圆点/描边)；deep=文字/hover；soft=底色。
     用法规范：激活态/chips 一律 soft 底 + deep 字；solid 不做大面积填充。 --- */
  --mc-blue: #5AA9E6;
  --mc-blue-deep: #3D8BCD;
  --mc-blue-soft: #E4F1FC;
  --mc-cyan: #62B6CB;
  --mc-cyan-deep: #2C7A8F;
  --mc-cyan-soft: #E2F3F7;
  --mc-green: #7FC8A9;
  --mc-green-deep: #4FA884;
  --mc-green-soft: #E2F4EC;
  --mc-yellow: #F5D06F;
  --mc-yellow-deep: #C79A2E;
  --mc-yellow-soft: #FEF6DE;
  --mc-peach: #F4B183;
  --mc-peach-deep: #D97F43;
  --mc-peach-soft: #FDEDE0;
  --mc-purple: #B7A6E0;
  --mc-purple-deep: #8F72C6;
  --mc-purple-soft: #F0EAFB;
}

/* ==========================================================================
   暗色模式变量覆盖 (Notion Dark)
   ========================================================================== */
[data-theme="dark"] {
  --color-bg: #191919;
  --color-surface: #202020;
  --color-surface-hover: #2f2f2f;
  --color-text: rgba(255, 255, 255, .81);
  --color-text-secondary: rgba(255, 255, 255, .45);
  --color-text-tertiary: rgba(255, 255, 255, .3);
  --color-primary: #529cca;
  --color-primary-hover: #6bb2dd;
  --color-accent: #529e72;
  --color-accent-hover: #5fae7f;
  --color-danger: #df5452;
  --color-warning: #c77d48;
  --color-border: rgba(255, 255, 255, .13);
  --color-border-strong: rgba(255, 255, 255, .2);
  --color-star: #c77d48;
  --color-code-bg: #252525;
  --color-code-text: #eb5757;
  --color-blockquote-bg: #252525;

  /* --- 马卡龙暗色覆盖：deep 提亮，soft 改半透明叠色 --- */
  --mc-blue: #6FB3E8;
  --mc-blue-deep: #8FC4EE;
  --mc-blue-soft: rgba(111, 179, 232, .15);
  --mc-cyan: #7AC3D6;
  --mc-cyan-deep: #97D0DF;
  --mc-cyan-soft: rgba(122, 195, 214, .15);
  --mc-green: #8CCFB5;
  --mc-green-deep: #A6DAC4;
  --mc-green-soft: rgba(140, 207, 181, .14);
  --mc-yellow: #E3C568;
  --mc-yellow-deep: #EDD58C;
  --mc-yellow-soft: rgba(227, 197, 104, .13);
  --mc-peach: #E8A87C;
  --mc-peach-deep: #EFBE99;
  --mc-peach-soft: rgba(232, 168, 124, .14);
  --mc-purple: #B3A1DE;
  --mc-purple-deep: #C6B8E8;
  --mc-purple-soft: rgba(179, 161, 222, .14);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, .5);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, .6);
}
