/* ============================================================
   华云设计系统 · 基础层 Foundations
   架构参照 Untitled UI v2.0（Figma 社区 15.8k赞/346k复制，断层第一）
   色相与气质承自 prototype 云杉纸感基底（CLAUDE.md 硬规则 2）
   ============================================================ */

:root{
  /* ---- 中性色阶：暖调、偏绿，不是纯灰 ---- */
  --n-0:#ffffff;  --n-25:#fbfbf7; --n-50:#f5f4ee; --n-100:#eeede5;
  --n-200:#e2e2d8; --n-300:#cbccc0; --n-400:#a3a89b; --n-500:#7f8878;
  --n-600:#5f6d63; --n-700:#46534a; --n-800:#333e37; --n-900:#253128; --n-950:#161d18;

  /* ---- 品牌色阶：云杉 Moss ---- */
  --b-50:#eef3ee;  --b-100:#dbe5da; --b-200:#bacfbc; --b-300:#93b39a;
  --b-400:#6b9179; --b-500:#496b55; --b-600:#3d5c49; --b-700:#2f5340;
  --b-800:#264334; --b-900:#1b3126;

  /* ---- 语义色：与品牌色分离，不参与装饰 ---- */
  --ok:#3f7d52;    --ok-bg:#e6f0e8;    --ok-bd:#bcd8c4;
  --warn:#b0803f;  --warn-bg:#f7ebd8;  --warn-bd:#e6cfa8;
  --err:#a1545c;   --err-bg:#f5e2e3;   --err-bd:#e3c0c3;
  --info:#5c7A87;  --info-bg:#e0eaee;  --info-bd:#c1d5dc;
  /* 淡底上的文字用：比填充色更深，实测 ≥4.5:1 */
  --ok-fg:#2f6440; --warn-fg:#8a6122; --err-fg:#8a3f47; --info-fg:#41616f;

  /* ---- 语义别名：组件只用这一层，不直接引色阶 ---- */
  --bg-app:var(--n-50);
  --bg-surface:var(--n-0);
  --bg-sunken:var(--n-100);
  /* 悬停用品牌色的极淡混合，不用中性灰——灰色悬停在有主题色的系统里显得脱节。
     递进关系：静止 → 悬停(品牌 7%) → 选中(b-100 + 品牌色文字 + 半粗) */
  --bg-hover:color-mix(in oklab, var(--b-500) 7%, var(--bg-surface));
  --bg-active:var(--b-100);
  --bg-inverse:var(--n-900);

  --fg:var(--n-900);
  --fg-soft:var(--n-700);   /* 8.1:1 */
  --fg-faint:var(--n-600);  /* 5.5:1 */
  --fg-disabled:var(--n-400);
  --fg-inverse:var(--n-0);
  --fg-brand:var(--b-700);

  /* ---- 导航专用槽位：让「黑侧栏」成为配色方案的一个选项，而不是硬编码 ---- */
  /* 侧栏明暗与页面明暗互不相干，所以这组必须写实值，不能从页面 token 派生 */
  --bg-nav:#ffffff;        --bd-nav:#e2e2d8;
  --fg-nav:#46534a;        --fg-nav-strong:#253128;  --fg-nav-faint:#7f8878;
  --bg-nav-hover:color-mix(in oklab, #496b55 8%, #ffffff);
  --bg-nav-active:#dbe5da; --fg-nav-active:#2f5340;

  --bd:var(--n-200);
  --bd-soft:var(--n-100);
  --bd-strong:var(--n-300);
  --bd-brand:var(--b-500);

  /* ---- 字体 ---- */
  --font-sans:"DM Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-mono:"IBM Plex Mono","SF Mono",ui-monospace,monospace;
  --font-serif:"Noto Serif SC","Songti SC",serif;   /* 仅用于教学正文/文档画布 */

  /* ---- 字阶 size/line ---- */
  --t-xs:12px;   --lh-xs:18px;
  --t-sm:13px;   --lh-sm:20px;
  --t-md:14px;   --lh-md:22px;   /* 正文默认，密集型后台标准 */
  --t-lg:16px;   --lh-lg:24px;
  --t-xl:18px;   --lh-xl:28px;
  --t-d-sm:22px; --lh-d-sm:30px;
  --t-d-md:28px; --lh-d-md:36px;
  --t-d-lg:34px; --lh-d-lg:42px;

  --w-normal:400; --w-medium:500; --w-semibold:600; --w-bold:700;

  /* ---- 间距 4px 基准栅格 ---- */
  --s-0:0; --s-1:2px; --s-2:4px; --s-3:6px; --s-4:8px; --s-5:12px;
  --s-6:16px; --s-7:20px; --s-8:24px; --s-9:32px; --s-10:40px;
  --s-11:48px; --s-12:64px;

  /* ---- 圆角：比原型 26px 收紧，密集数据需要更硬的边 ---- */
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:12px; --r-2xl:16px; --r-full:999px;

  /* ---- 阴影：绿调而非纯黑 ---- */
  --sh-xs:0 1px 2px rgba(37,49,40,.05);
  --sh-sm:0 1px 3px rgba(37,49,40,.08), 0 1px 2px rgba(37,49,40,.05);
  --sh-md:0 4px 8px -2px rgba(37,49,40,.09), 0 2px 4px -2px rgba(37,49,40,.05);
  --sh-lg:0 12px 16px -4px rgba(37,49,40,.09), 0 4px 6px -2px rgba(37,49,40,.04);
  --sh-xl:0 20px 24px -4px rgba(37,49,40,.10), 0 8px 8px -4px rgba(37,49,40,.04);

  /* ---- 焦点环 Untitled UI 约定 ---- */
  --ring:0 0 0 4px rgba(73,107,85,.20);
  --ring-err:0 0 0 4px rgba(161,84,92,.20);

  /* ---- 密度 ---- */
  --h-ctl-sm:32px; --h-ctl:36px; --h-ctl-lg:40px;
  --h-row:52px;
  --w-sidebar:260px; --w-rail:64px; --h-topbar:60px;

  /* ---- 质感层墨色：水印/纹样/渐变专用，与品牌色解耦 ---- */
  --tex-ink:var(--b-700);
  --tex-mark:.055;      /* 水印透明度，上限 .08 */
  --tex-grain:.035;

  /* ---- 动效 ---- */
  --ease:cubic-bezier(.2,.8,.3,1);
  --dur-fast:120ms; --dur:200ms; --dur-slow:320ms;
}

/* ---- 侧栏独立明暗：云杉 · 深侧栏 ---- */
:root[data-nav="dark"]{
  --bg-nav:#1a211c;        --bd-nav:#2c372f;
  --fg-nav:#a0afa5;        --fg-nav-strong:#eef2ef;  --fg-nav-faint:#7d8d82;
  --bg-nav-hover:color-mix(in oklab, #7fae8c 16%, #1a211c);
  --bg-nav-active:color-mix(in oklab, #7fae8c 26%, #1a211c);
  --fg-nav-active:#e6f1e9;
}

/* ---- 深色：只改 token，组件层一行不动 ---- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --n-0:#121713; --n-25:#161c18; --n-50:#1a211c; --n-100:#212a23;
    --n-200:#2c372f; --n-300:#3d4b41; --n-400:#5b6b60; --n-500:#7d8d82;
    --n-600:#a0afa5; --n-700:#c0ccc4; --n-800:#dbe3dd; --n-900:#eef2ef; --n-950:#ffffff;
    --b-50:#1c2b21; --b-100:#223328; --b-200:#2f4938; --b-300:#43664f;
    --b-400:#5c8869; --b-500:#7fae8c; --b-600:#9cc4a7; --b-700:#b6d5be;
    --b-800:#cfe4d4; --b-900:#e6f1e9;
    --ok:#7fb98d;   --ok-bg:#1e2f23;   --ok-bd:#33513c;
    --warn:#d2a76b; --warn-bg:#332819; --warn-bd:#59452a;
    --err:#cf8f96;  --err-bg:#332123;  --err-bd:#563a3e;
    --info:#93b0bc; --info-bg:#1e2a2f; --info-bd:#38505a;
    --ok-fg:var(--ok); --warn-fg:var(--warn); --err-fg:var(--err); --info-fg:var(--info);
    --bg-app:var(--n-25); --bg-surface:var(--n-50); --bg-sunken:var(--n-100);
    --bg-hover:color-mix(in oklab, var(--b-500) 14%, var(--bg-surface)); --bg-active:var(--b-100);
    --sh-xs:0 1px 2px rgba(0,0,0,.4);
    --sh-sm:0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
    --sh-md:0 4px 8px -2px rgba(0,0,0,.5), 0 2px 4px -2px rgba(0,0,0,.4);
    --sh-lg:0 12px 16px -4px rgba(0,0,0,.55), 0 4px 6px -2px rgba(0,0,0,.4);
    --sh-xl:0 20px 24px -4px rgba(0,0,0,.6), 0 8px 8px -4px rgba(0,0,0,.4);
    --ring:0 0 0 4px rgba(127,174,140,.26);
    --tex-ink:var(--b-600); --tex-mark:.085; --tex-grain:.06;
  }
}
:root[data-theme="dark"]{
  --n-0:#121713; --n-25:#161c18; --n-50:#1a211c; --n-100:#212a23;
  --n-200:#2c372f; --n-300:#3d4b41; --n-400:#5b6b60; --n-500:#7d8d82;
  --n-600:#a0afa5; --n-700:#c0ccc4; --n-800:#dbe3dd; --n-900:#eef2ef; --n-950:#ffffff;
  --b-50:#1c2b21; --b-100:#223328; --b-200:#2f4938; --b-300:#43664f;
  --b-400:#5c8869; --b-500:#7fae8c; --b-600:#9cc4a7; --b-700:#b6d5be;
  --b-800:#cfe4d4; --b-900:#e6f1e9;
  --ok:#7fb98d;   --ok-bg:#1e2f23;   --ok-bd:#33513c;
  --warn:#d2a76b; --warn-bg:#332819; --warn-bd:#59452a;
  --err:#cf8f96;  --err-bg:#332123;  --err-bd:#563a3e;
  --info:#93b0bc; --info-bg:#1e2a2f; --info-bd:#38505a;
  --ok-fg:var(--ok); --warn-fg:var(--warn); --err-fg:var(--err); --info-fg:var(--info);
  --bg-app:var(--n-25); --bg-surface:var(--n-50); --bg-sunken:var(--n-100);
  --bg-hover:color-mix(in oklab, var(--b-500) 14%, var(--bg-surface)); --bg-active:var(--b-100);
  --sh-xs:0 1px 2px rgba(0,0,0,.4);
  --sh-sm:0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --sh-md:0 4px 8px -2px rgba(0,0,0,.5), 0 2px 4px -2px rgba(0,0,0,.4);
  --sh-lg:0 12px 16px -4px rgba(0,0,0,.55), 0 4px 6px -2px rgba(0,0,0,.4);
  --sh-xl:0 20px 24px -4px rgba(0,0,0,.6), 0 8px 8px -4px rgba(0,0,0,.4);
  --ring:0 0 0 4px rgba(127,174,140,.26);
    --tex-ink:var(--b-600); --tex-mark:.085; --tex-grain:.06;
}

/* ============================================================
   配色方案 · 华云 Huayun（黑红）
   取自《产品设计组织转型·汇报》Slides —— 本地源
   huayun/问题汇总/产品设计组织转型-汇报Slides.html
   原体系 OKLCH，色相锚 30。主色 #E50012。

   定位是「黑红」而非「红」：黑负责结构与质感，红只在动作点上出现。
   因此 --tex-ink 指向近黑而不是品牌红 —— 水印、纹样、氛围渐变一律走墨色，
   避免整页泛红。中性色阶比云杉更冷更硬，描边压深，出「黑色细线条」的观感。
   ============================================================ */
:root[data-palette="huayun"]{
  --n-0:#ffffff;
  --n-25:oklch(98.4% .002 30);  --n-50:oklch(95.8% .005 30);   /* 纸底再压深：白卡片才浮得起来 */
  --n-100:oklch(93% .006 30);
  --n-200:oklch(85% .007 30);                                  /* 描边压硬 → 出黑色细线条 */
  --n-300:oklch(70% .009 30);
  --n-400:oklch(66% .009 30);   --n-500:oklch(55% .01 30);
  --n-600:oklch(45% .011 30);   --n-700:oklch(34% .011 30);
  --n-800:oklch(24% .01 30);    --n-900:oklch(14% .008 30);    /* 近黑，主结构色 */
  --n-950:oklch(8% .006 30);

  --b-50:oklch(96.6% .022 30);  --b-100:oklch(93% .05 30);
  --b-200:oklch(88% .08 30);    --b-300:oklch(84% .1 30);
  --b-400:oklch(70% .16 30);
  --b-500:#E50012;                                             /* ← deck --red，只用在动作点 */
  --b-600:oklch(51% .21 30);    --b-700:oklch(47% .195 30);
  --b-800:oklch(39% .16 30);    --b-900:oklch(30% .12 30);

  /* 关键：质感层走墨色，不走红 */
  --tex-ink:var(--n-900); --tex-mark:.07; --tex-grain:.03;

  /* 黑红的浅色版靠「黑侧栏」立住 —— 没有这块黑，浅色只剩一片白，压不住。
     悬停是中间调红（品牌红 24% 混黑），选中更实（36%），层级看得出来。 */
  --bg-nav:oklch(16% .012 30);   --bd-nav:oklch(26% .014 30);
  --fg-nav:oklch(74% .013 30);   --fg-nav-strong:oklch(97% .004 30);
  --fg-nav-faint:oklch(56% .012 30);
  --bg-nav-hover:color-mix(in oklab, #E50012 24%, oklch(16% .012 30));
  --bg-nav-active:color-mix(in oklab, #E50012 38%, oklch(16% .012 30));
  --fg-nav-active:oklch(98% .003 30);

  --ok:#2f7d4f;   --ok-bg:#e8f2ea;   --ok-bd:#bdd9c6;   --ok-fg:#256440;
  --warn:#b0702a; --warn-bg:#f8ecdb; --warn-bd:#e8cfa9; --warn-fg:#8a5619;
  --err:#9b1c22;  --err-bg:#f8e4e4;  --err-bd:#e7bfc0;  --err-fg:#8a181e;
  --info:#4a6b80; --info-bg:#e5edf1; --info-bd:#c3d6de; --info-fg:#3a5768;

  --sh-xs:0 1px 2px rgba(24,14,12,.06);
  --sh-sm:0 1px 3px rgba(24,14,12,.09), 0 1px 2px rgba(24,14,12,.05);
  --sh-md:0 4px 8px -2px rgba(24,14,12,.10), 0 2px 4px -2px rgba(24,14,12,.05);
  --sh-lg:0 12px 16px -4px rgba(24,14,12,.10), 0 4px 6px -2px rgba(24,14,12,.04);
  --sh-xl:0 20px 24px -4px rgba(24,14,12,.11), 0 8px 8px -4px rgba(24,14,12,.04);
  --ring:0 0 0 4px rgba(229,0,18,.16);
  --ring-err:0 0 0 4px rgba(155,28,34,.22);
}

/* 华云 · 深色。选择器带 [data-palette] → 特异性 0,3,0，稳压云杉深色的 0,2,0 */
@media (prefers-color-scheme:dark){
  :root[data-palette="huayun"]:not([data-theme="light"]){
    --n-0:#16110f;  --n-25:#100c0b; --n-50:#1a1513;  --n-100:#221b19;
    --n-200:#2f2724; --n-300:#413733; --n-400:#5f534e; --n-500:#80736d;
    --n-600:#a2958f; --n-700:#c5b8b2; --n-800:#ded4cf; --n-900:#f3ebe8; --n-950:#ffffff;
    --b-50:#2b1213; --b-100:#38181a; --b-200:#4d2123; --b-300:#6f2c30;
    --b-400:#a63a3d; --b-500:#e5484d; --b-600:#f06a6d; --b-700:#ff8d8f;
    --b-800:#ffb3b4; --b-900:#ffd9da;
    --tex-ink:var(--n-800); --tex-mark:.07; --tex-grain:.05;
    --ok:#6fbc8a;   --ok-bg:#16291d;   --ok-bd:#2c4a36;
    --warn:#d9a05e; --warn-bg:#2b2015; --warn-bd:#4e3b23;
    --err:#e8797e;  --err-bg:#2e1618;  --err-bd:#53292c;
    --info:#8fb2c6; --info-bg:#1a2429; --info-bd:#34474f;
    --ok-fg:var(--ok); --warn-fg:var(--warn); --err-fg:var(--err); --info-fg:var(--info);
    --bg-app:var(--n-25); --bg-surface:var(--n-50); --bg-sunken:var(--n-100);
    --bg-hover:color-mix(in oklab, var(--b-500) 14%, var(--bg-surface)); --bg-active:var(--b-100);
    --sh-xs:0 1px 2px rgba(0,0,0,.4);
    --sh-sm:0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
    --sh-md:0 4px 8px -2px rgba(0,0,0,.5), 0 2px 4px -2px rgba(0,0,0,.4);
    --sh-lg:0 12px 16px -4px rgba(0,0,0,.55), 0 4px 6px -2px rgba(0,0,0,.4);
    --sh-xl:0 20px 24px -4px rgba(0,0,0,.6), 0 8px 8px -4px rgba(0,0,0,.4);
    --ring:0 0 0 4px rgba(229,72,77,.26);
  }
}
:root[data-palette="huayun"][data-theme="dark"]{
  --n-0:#16110f;  --n-25:#100c0b; --n-50:#1a1513;  --n-100:#221b19;
  --n-200:#2f2724; --n-300:#413733; --n-400:#5f534e; --n-500:#80736d;
  --n-600:#a2958f; --n-700:#c5b8b2; --n-800:#ded4cf; --n-900:#f3ebe8; --n-950:#ffffff;
  --b-50:#2b1213; --b-100:#38181a; --b-200:#4d2123; --b-300:#6f2c30;
  --b-400:#a63a3d; --b-500:#e5484d; --b-600:#f06a6d; --b-700:#ff8d8f;
  --b-800:#ffb3b4; --b-900:#ffd9da;
  --tex-ink:var(--n-800); --tex-mark:.07; --tex-grain:.05;
  --ok:#6fbc8a;   --ok-bg:#16291d;   --ok-bd:#2c4a36;
  --warn:#d9a05e; --warn-bg:#2b2015; --warn-bd:#4e3b23;
  --err:#e8797e;  --err-bg:#2e1618;  --err-bd:#53292c;
  --info:#8fb2c6; --info-bg:#1a2429; --info-bd:#34474f;
  --ok-fg:var(--ok); --warn-fg:var(--warn); --err-fg:var(--err); --info-fg:var(--info);
  --bg-app:var(--n-25); --bg-surface:var(--n-50); --bg-sunken:var(--n-100);
  --bg-hover:color-mix(in oklab, var(--b-500) 14%, var(--bg-surface)); --bg-active:var(--b-100);
  --sh-xs:0 1px 2px rgba(0,0,0,.4);
  --sh-sm:0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --sh-md:0 4px 8px -2px rgba(0,0,0,.5), 0 2px 4px -2px rgba(0,0,0,.4);
  --sh-lg:0 12px 16px -4px rgba(0,0,0,.55), 0 4px 6px -2px rgba(0,0,0,.4);
  --sh-xl:0 20px 24px -4px rgba(0,0,0,.6), 0 8px 8px -4px rgba(0,0,0,.4);
  --ring:0 0 0 4px rgba(229,72,77,.26);
}

/* ---- 侧栏独立明暗：华云 · 浅侧栏。0,3,0 压过前面所有导航规则 ---- */
:root[data-palette="huayun"][data-nav="light"]{
  --bg-nav:#ffffff;                --bd-nav:oklch(85% .007 30);
  --fg-nav:oklch(34% .011 30);     --fg-nav-strong:oklch(14% .008 30);
  --fg-nav-faint:oklch(55% .01 30);
  --bg-nav-hover:color-mix(in oklab, #E50012 8%, #ffffff);
  --bg-nav-active:oklch(93% .05 30);
  --fg-nav-active:oklch(47% .195 30);
}