/* 云筑 AI — 设计令牌（唯一事实来源）
   所有颜色、间距、字号、圆角、阴影、动效都必须从这里取值，组件样式不允许再写死数值。
   主题通过 <html data-accent="..."> 与 <html data-scheme="..."> 切换。 */

:root{
  /* ---------- 中性色阶（深色方案，默认） ---------- */
  --n-0:#000000;      --n-1:#050505;  --n-2:#0a0a0a;  --n-3:#101012;
  --n-4:#16161a;      --n-5:#1d1d22;  --n-6:#27272d;  --n-7:#3a3a42;
  --n-8:#56565f;      --n-9:#8b8b95;  --n-10:#b9b9c2; --n-11:#e8e8ee;
  --n-12:#ffffff;

  /* ---------- 语义色（随方案切换） ---------- */
  --bg:var(--n-1);
  --surface:var(--n-2);        /* 页脚、弹窗底 */
  --card:var(--n-3);           /* 卡片 */
  --card-hover:var(--n-4);     /* 卡片悬停 */
  --inset:var(--n-4);          /* 内嵌块：chip / tag / 按钮底 */
  --inset-hover:var(--n-5);
  --control:var(--n-5);        /* 激活态控件底 */
  --input:var(--n-3);          /* 输入框 */
  --input-focus:var(--n-4);
  --line:var(--n-5);           /* 常规描边 */
  --line-strong:var(--n-6);    /* 强调描边 */
  --line-bold:var(--n-7);      /* 高亮描边 */
  --text:var(--n-12);
  --text-2:#d1d5db;            /* 次级正文 */
  --text-3:#9b9ba6;            /* 说明文字 */
  --text-4:#6e6e78;            /* 弱化文字 */
  --on-accent:#ffffff;

  /* ---------- 功能色 ---------- */
  --ok:#22c55e;   --ok-soft:rgba(34,197,94,.14);
  --warn:#f59e0b; --warn-soft:rgba(245,158,11,.14);
  --danger:#ef4444; --danger-soft:rgba(239,68,68,.14);
  --info:#38bdf8; --info-soft:rgba(56,189,248,.14);
  --gold:#fbbf24;

  /* ---------- 强调色（可被 data-accent 覆盖） ---------- */
  --accent:#a855f7;
  --accent-2:#7c3aed;
  --accent-soft:rgba(168,85,247,.14);
  --accent-line:rgba(168,85,247,.32);
  --grad-title:linear-gradient(90deg,#d0b2ff 0%,#ffeed8 42.83%,#e8400d 88.38%);
  --grad-accent:linear-gradient(135deg,var(--accent-2),var(--accent));

  /* ---------- 间距阶梯 ---------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;
  --sp-9:48px; --sp-10:64px;--sp-11:80px;

  /* ---------- 字号阶梯 ---------- */
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px;
  --fs-15:15px; --fs-16:16px; --fs-17:17px; --fs-20:20px;
  --fs-24:24px; --fs-30:30px; --fs-44:44px;

  /* ---------- 圆角 ---------- */
  --r-sm:8px;  --r-md:12px;  --r-lg:18px; --r-xl:24px; --r-pill:999px;

  /* ---------- 阴影 ---------- */
  --sh-1:0 2px 8px rgba(0,0,0,.35);
  --sh-2:0 10px 30px rgba(0,0,0,.5);
  --sh-3:0 24px 80px rgba(0,0,0,.7);
  --sh-modal:0 32px 90px rgba(0,0,0,.78);

  /* ---------- 动效 ---------- */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:120ms; --t-base:200ms; --t-slow:340ms; --t-xslow:560ms;

  /* ---------- 布局 ---------- */
  --page-max:1400px;
  --nav-h:68px;
  --radius:var(--r-lg);
  --radius-lg:var(--r-xl);
  --pill:var(--r-pill);
  --shadow:var(--sh-3);
  --border:var(--line);
  --border-2:var(--line-strong);
  --border-3:var(--line-bold);
  --muted:var(--text-3);
  --muted-2:var(--text-4);
  --foreground-70:rgba(255,255,255,.7);

  /* ---------- 密度（可被 data-density 覆盖） ---------- */
  --gap-card:22px;
  --pad-card:16px;
  --pad-section:44px;
}

/* ---------- 强调色主题 ---------- */
html[data-accent="cinnabar"]{
  --accent:#e2482f; --accent-2:#b02a17;
  --accent-soft:rgba(226,72,47,.15); --accent-line:rgba(226,72,47,.34);
  --grad-title:linear-gradient(90deg,#ffd0c2 0%,#fff0d8 44%,#e8400d 92%);
}
html[data-accent="indigo"]{
  --accent:#4d7cfe; --accent-2:#2b52d8;
  --accent-soft:rgba(77,124,254,.15); --accent-line:rgba(77,124,254,.34);
  --grad-title:linear-gradient(90deg,#c7d9ff 0%,#e8f0ff 44%,#2b52d8 92%);
}
html[data-accent="celadon"]{
  --accent:#2fbfa0; --accent-2:#149c80;
  --accent-soft:rgba(47,191,160,.15); --accent-line:rgba(47,191,160,.34);
  --grad-title:linear-gradient(90deg,#c4f2e6 0%,#eafaf5 44%,#149c80 92%);
}
html[data-accent="gold"]{
  --accent:#d9a115; --accent-2:#a8760a;
  --accent-soft:rgba(217,161,21,.15); --accent-line:rgba(217,161,21,.34);
  --grad-title:linear-gradient(90deg,#ffe6a8 0%,#fff6e0 44%,#a8760a 92%);
}

/* ---------- 浅色方案（宣纸） ---------- */
html[data-scheme="light"]{
  --bg:#f6f5f3;
  --surface:#ffffff;
  --card:#ffffff;
  --card-hover:#fbfaf9;
  --inset:#f0eeeb;
  --inset-hover:#e7e4e0;
  --control:#e7e4e0;
  --input:#ffffff;
  --input-focus:#fffdfa;
  --line:#e4e1dc;
  --line-strong:#d3cec7;
  --line-bold:#bdb7ae;
  --text:#17171a;
  --text-2:#3d3d45;
  --text-3:#61616c;
  --text-4:#8a8a95;
  --on-accent:#ffffff;
  --ok:#16a34a; --ok-soft:rgba(22,163,74,.12);
  --warn:#b45309; --warn-soft:rgba(180,83,9,.12);
  --danger:#dc2626; --danger-soft:rgba(220,38,38,.12);
  --info:#0284c7; --info-soft:rgba(2,132,199,.12);
  --gold:#a8760a;
  --sh-1:0 2px 8px rgba(23,23,26,.08);
  --sh-2:0 10px 30px rgba(23,23,26,.10);
  --sh-3:0 24px 60px rgba(23,23,26,.14);
  --sh-modal:0 32px 90px rgba(23,23,26,.20);
  --foreground-70:rgba(23,23,26,.7);
}

/* ---------- 密度：紧凑 ---------- */
html[data-density="compact"]{
  --gap-card:14px;
  --pad-card:12px;
  --pad-section:28px;
  --nav-h:58px;
}

/* ---------- 动效：减弱 / 关闭 ---------- */
html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after{
  animation-duration:.001ms!important;
  animation-iteration-count:1!important;
  transition-duration:.001ms!important;
  scroll-behavior:auto!important;
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}