/* ==========================================================================
   失语企发Pro — 设计令牌（严格来自 docs/DESIGN.md §1 冻结版）
   所有颜色/圆角/阴影/字体必须走变量；组件样式表内禁止出现硬编码颜色。
   ========================================================================== */

:root{
  /* 品牌主色：靛紫 */
  --brand-50:#f2f2fe; --brand-100:#e6e6fd; --brand-200:#cfcffb;
  --brand-300:#b0b0f7; --brand-400:#8c8cf0; --brand-500:#5b5bd6;
  --brand-600:#4a4ac4; --brand-700:#3c3ca6; --brand-800:#323288;
  --brand-900:#2b2b6e;
  --brand-grad: linear-gradient(135deg,#6d5ef0 0%,#8b5cf6 45%,#c026d3 100%);
  /* 辅助色 */
  --success:#12b76a; --success-bg:#e7f8f0;
  --warning:#f79009; --warning-bg:#fef4e6;
  --danger:#f04438;  --danger-bg:#feecea;
  --info:#2e90fa;    --info-bg:#e8f2fe;
  --price:#f5222d;   /* 价格红 —— 发卡网惯例，必须醒目 */
  /* 中性 */
  --text-1:#0f172a; --text-2:#475569; --text-3:#94a3b8; --text-4:#cbd5e1;
  --bg-app:#f4f5fb;  --surface:#ffffff; --surface-2:#fafbfd;
  --border:#e8eaf1;  --border-strong:#d8dbe6;
  --sidebar-bg:#151a2d; --sidebar-bg-2:#1c2340; --sidebar-text:#9aa3bd;
  /* 形状 */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow-md:0 4px 16px -4px rgba(16,24,40,.10),0 2px 6px -2px rgba(16,24,40,.06);
  --shadow-lg:0 20px 48px -16px rgba(16,24,40,.22);
  --shadow-brand:0 10px 30px -10px rgba(91,91,214,.55);
  --font: system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --mono: ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;

  /* ------------------------------------------------------------------
     扩展令牌（DESIGN.md 允许颜色只走变量，因此以下半透明色统一登记在此）
     ------------------------------------------------------------------ */
  --on-brand:#ffffff;                 /* 品牌色之上的文字 */
  --overlay:rgba(15,23,42,.45);       /* 弹窗遮罩（DESIGN §2.4 指定值） */
  --focus-ring:0 0 0 3px rgba(91,91,214,.12);
  --focus-ring-danger:0 0 0 3px rgba(240,68,56,.14);
  --brand-soft:rgba(91,91,214,.09);   /* 品牌色浅底（选中态/悬浮态） */
  --brand-soft-2:rgba(91,91,214,.16);
  --white-soft:rgba(255,255,255,.05);
  --white-soft-2:rgba(255,255,255,.12);
  --sidebar-hover:rgba(255,255,255,.05);
  --sidebar-divider:rgba(255,255,255,.07);
  --sidebar-tooltip-bg:#1c2340;
  --sidebar-active-1:rgba(109,94,240,.9);
  --sidebar-active-2:rgba(139,92,246,.55);
  --success-dark:#0e9f6e; --success-dark-bg:#e3f5ee;
  --muted:#94a3b8;        --muted-bg:#f1f3f8;
  --price-bg:#fff1f0;
  --skel-1:#eceef5; --skel-2:#f7f8fc;
  --track:#eef0f7;                    /* 进度/条形图底槽 */
  --chart-grid:rgba(148,163,184,.28);
  --chart-area-1:rgba(91,91,214,.22);
  --chart-area-2:rgba(91,91,214,0);
  --hero-glow-1:rgba(255,255,255,.18);
  --hero-glow-2:rgba(192,38,211,.25);
  --shadow-pop:0 12px 32px -12px rgba(16,24,40,.24);
}

/* ========================== 深色主题 ========================== */
html[data-theme="dark"]{
  --text-1:#e9edf7; --text-2:#a5b0c8; --text-3:#76829f; --text-4:#4e5874;
  --bg-app:#0a0e1a; --surface:#121728; --surface-2:#171d31;
  --border:#232b42; --border-strong:#333d5a;

  --brand-50:#1a1f39; --brand-100:#1f2544; --brand-200:#2b3260;
  --brand-300:#3b4380; --brand-400:#7979e8; --brand-500:#7b7bea;
  --brand-600:#8f8ff0;

  --success:#2ecc8f; --success-bg:#0f2a20;
  --warning:#f9a825; --warning-bg:#2c2113;
  --danger:#ff6b63;  --danger-bg:#2d1817;
  --info:#4aa8ff;    --info-bg:#0f2340;
  --price:#ff6b6b;   --price-bg:#2d1817;

  --success-dark:#34d399; --success-dark-bg:#0f2a26;
  --muted:#7c879f;        --muted-bg:#1b2135;

  --sidebar-bg:#0d1120; --sidebar-bg-2:#141a2f; --sidebar-text:#8b95b0;
  --sidebar-divider:rgba(255,255,255,.06);
  --sidebar-tooltip-bg:#1c2340;

  --brand-soft:rgba(123,123,234,.14);
  --brand-soft-2:rgba(123,123,234,.22);
  --overlay:rgba(3,6,16,.64);
  --focus-ring:0 0 0 3px rgba(123,123,234,.22);
  --focus-ring-danger:0 0 0 3px rgba(255,107,99,.20);

  --skel-1:#1b2236; --skel-2:#242c46;
  --track:#212942;
  --chart-grid:rgba(148,163,184,.16);
  --chart-area-1:rgba(123,123,234,.28);
  --chart-area-2:rgba(123,123,234,0);

  --shadow-sm:0 1px 2px rgba(0,0,0,.40);
  --shadow-md:0 4px 16px -4px rgba(0,0,0,.50),0 2px 6px -2px rgba(0,0,0,.36);
  --shadow-lg:0 24px 56px -16px rgba(0,0,0,.72);
  --shadow-pop:0 12px 32px -12px rgba(0,0,0,.66);
  --shadow-brand:0 10px 30px -10px rgba(91,91,214,.60);
}

/* ============================ 最小化重置 ============================ */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scrollbar-color:var(--border-strong) transparent;
  scrollbar-width:thin;
}

body{
  margin:0;
  font-family:var(--font);
  font-size:14px;
  line-height:1.55;
  color:var(--text-1);
  background:var(--bg-app);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg,video,canvas{ max-width:100%; }
img{ height:auto; }

button{ font:inherit; color:inherit; }
input,select,textarea{ font:inherit; color:inherit; }

h1,h2,h3,h4,h5,h6,p,figure{ margin:0; }
ul,ol{ margin:0; padding:0; }
a{ color:var(--brand-500); text-decoration:none; }
a:hover{ text-decoration:underline; }

:focus-visible{ outline:2px solid var(--brand-500); outline-offset:2px; }

::selection{ background:var(--brand-soft-2); color:var(--text-1); }

/* ============================== 滚动条 ============================== */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:var(--border-strong);
  border-radius:var(--r-pill);
  border:3px solid transparent;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{ background:var(--text-4); background-clip:content-box; }
::-webkit-scrollbar-corner{ background:transparent; }