﻿/* ===========================================================
   Design tokens — 物资管理系统 V4.0
   现代简约 · 白底 · 蓝主色 · 毛玻璃
   =========================================================== */
:root {
  color-scheme: light;

  /* paper & ink */
  --bg:            #f5f7fb;
  --bg-deep:       #eef2f9;
  --surface:       #ffffff;
  --surface-2:     #f9fafc;
  --ink:           #0e1729;
  --ink-2:         #33415c;
  --muted:         #69748b;
  --line:          #e5e9f2;
  --line-strong:   #d4dae6;

  /* accent (blue) */
  --accent:        #2563eb;
  --accent-600:    #1d4ed8;
  --accent-700:    #1e40af;
  --accent-soft:   #e8f0ff;
  --accent-soft-2: #f2f7ff;
  --accent-ink:    #ffffff;

  /* status */
  --ok:            #12855a;
  --ok-soft:       #e6f7ef;
  --warn:          #b45309;
  --warn-soft:     #fdf1e2;
  --danger:        #c62828;
  --danger-soft:   #fdecec;
  --info:          #0e7490;
  --info-soft:     #e5f6fa;

  /* glass */
  --glass:         rgba(255, 255, 255, 0.66);
  --glass-strong:  rgba(255, 255, 255, 0.82);
  --glass-line:    rgba(255, 255, 255, 0.7);
  --glass-blur:    16px;

  /* geometry */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* elevation */
  --sh-xs: 0 1px 2px rgba(16, 30, 54, 0.05);
  --sh-sm: 0 2px 8px rgba(16, 30, 54, 0.06), 0 1px 2px rgba(16, 30, 54, 0.04);
  --sh-md: 0 10px 24px -8px rgba(16, 30, 54, 0.18), 0 2px 6px rgba(16, 30, 54, 0.05);
  --sh-lg: 0 24px 60px -20px rgba(16, 30, 54, 0.28), 0 6px 16px rgba(16, 30, 54, 0.06);
  --ring: 0 0 0 3px rgba(37, 99, 235, 0.18);

  /* space (4pt) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px;

  /* type */
  --font: "Inter", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --font-num: "SF Mono", "JetBrains Mono", Consolas, "Cascadia Mono", monospace;
  --fs-scale: 1;

  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 420ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --sidebar-w: 68px;
  --topbar-h: 76px;
}

/* ---------- dark ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --bg:            #0a0f1c;
  --bg-deep:       #070b15;
  --surface:       #101728;
  --surface-2:     #141c30;
  --ink:           #eef2fa;
  --ink-2:         #c3ccdd;
  --muted:         #8b96ad;
  --line:          #1f2940;
  --line-strong:   #2c3854;

  --accent:        #5b8cff;
  --accent-600:    #4a7bf0;
  --accent-700:    #3a66d6;
  --accent-soft:   #16233f;
  --accent-soft-2: #121b31;

  --ok:            #35c48c;
  --ok-soft:       #10291f;
  --warn:          #e3a355;
  --warn-soft:     #2a2113;
  --danger:        #ef6b6b;
  --danger-soft:   #2c1618;
  --info:          #4cc6dd;
  --info-soft:     #0f2630;

  --glass:         rgba(18, 26, 44, 0.62);
  --glass-strong:  rgba(18, 26, 44, 0.86);
  --glass-line:    rgba(255, 255, 255, 0.08);

  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --sh-md: 0 12px 28px -10px rgba(0, 0, 0, 0.6);
  --sh-lg: 0 28px 70px -24px rgba(0, 0, 0, 0.75);
  --ring: 0 0 0 3px rgba(91, 140, 255, 0.25);
}

/* font scale set on <html> by settings */
html { font-size: calc(16px * var(--fs-scale)); }
html[data-font="s"] { --fs-scale: 0.92; }
html[data-font="m"] { --fs-scale: 1; }
html[data-font="l"] { --fs-scale: 1.1; }
