/* =========================================================================
   tokens.css — IPP8 Console design tokens (2026)
   深色优先 · 冷调中性 · IPP8 品牌绿强调 · 可切换浅色
   品牌绿取自 logo 渐层实测：#B4F46A (柠檬) → #77DA54 (草绿)
   ========================================================================= */

:root {
  /* ---- brand ---------------------------------------------------------- */
  --brand-lime: #b4f46a;
  --brand-grass: #58cf4e;
  --brand: #54d65c;              /* 主强调绿 */
  --brand-ink: #0a2e12;          /* 绿底上的深字 */
  --brand-grad: linear-gradient(140deg, #b4f46a 0%, #5fd24e 55%, #36b94a 100%);
  --brand-grad-soft: linear-gradient(140deg, rgba(180,244,106,.16), rgba(54,185,74,.10));

  /* ---- radii ---------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 999px;

  /* ---- spacing step (4px grid) --------------------------------------- */
  --sp: 4px;

  /* ---- typography ----------------------------------------------------- */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Code",
               Consolas, monospace;
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-16: 16px; --fs-18: 18px; --fs-22: 22px; --fs-28: 28px; --fs-34: 34px;
  --lh-tight: 1.15; --lh: 1.5;

  /* ---- motion --------------------------------------------------------- */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 120ms; --t: 180ms; --t-slow: 320ms;

  /* ---- z ------------------------------------------------------------- */
  --z-rail: 40; --z-topbar: 50; --z-drawer: 70; --z-modal: 90;
  --z-palette: 110; --z-toast: 130;

  color-scheme: dark;
}

/* =========================================================================
   DARK (default)
   ========================================================================= */
:root,
:root[data-theme="dark"] {
  --bg: #0b0d0f;
  --bg-grid: rgba(255, 255, 255, .022);
  --surface: #111417;
  --surface-2: #171c20;
  --surface-3: #1e242a;
  --surface-hover: #1c2228;

  --line: rgba(255, 255, 255, .075);
  --line-2: rgba(255, 255, 255, .12);
  --line-strong: rgba(255, 255, 255, .20);

  --text: #e8ecef;
  --text-dim: #9aa3ab;
  --text-faint: #646d75;
  --text-onbrand: #07240e;

  --accent: var(--brand);
  --accent-weak: rgba(84, 214, 92, .14);
  --accent-line: rgba(84, 214, 92, .35);
  --accent-text: #86e98a;

  --info: #5aa2ff;   --info-weak: rgba(90, 162, 255, .14);
  --warn: #f5b544;   --warn-weak: rgba(245, 181, 68, .15);
  --danger: #ff5d5d; --danger-weak: rgba(255, 93, 93, .14);
  --good: #45d483;   --good-weak: rgba(69, 212, 131, .14);
  --violet: #a98bff; --violet-weak: rgba(169, 139, 255, .15);
  --cyan: #38d3c9;   --cyan-weak: rgba(56, 211, 201, .14);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 8px 24px -8px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35);
  --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, .7), 0 6px 18px rgba(0, 0, 0, .4);
  --glow: 0 0 0 1px var(--accent-line), 0 0 28px -6px rgba(84, 214, 92, .4);

  --chrome: rgba(13, 16, 19, .72);       /* glassy topbar */
  --rail: #0e1114;
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

/* =========================================================================
   LIGHT
   ========================================================================= */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6f7;
  --bg-grid: rgba(16, 24, 32, .025);
  --surface: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #f5f7f8;
  --surface-hover: #f2f5f6;

  --line: rgba(16, 24, 32, .09);
  --line-2: rgba(16, 24, 32, .14);
  --line-strong: rgba(16, 24, 32, .24);

  --text: #0f1618;
  --text-dim: #566069;
  --text-faint: #8b949c;
  --text-onbrand: #07240e;

  --accent: #22a447;
  --accent-weak: rgba(34, 164, 71, .12);
  --accent-line: rgba(34, 164, 71, .34);
  --accent-text: #198039;

  --info: #2f73e8;   --info-weak: rgba(47, 115, 232, .1);
  --warn: #c6881a;   --warn-weak: rgba(198, 136, 26, .12);
  --danger: #dc3a3a; --danger-weak: rgba(220, 58, 58, .1);
  --good: #16a34a;   --good-weak: rgba(22, 163, 74, .1);
  --violet: #7c5cff; --violet-weak: rgba(124, 92, 255, .1);
  --cyan: #0fb5aa;   --cyan-weak: rgba(15, 181, 170, .1);

  --shadow-sm: 0 1px 2px rgba(16, 24, 32, .06);
  --shadow: 0 10px 28px -12px rgba(16, 24, 32, .22), 0 2px 6px rgba(16, 24, 32, .06);
  --shadow-lg: 0 28px 64px -20px rgba(16, 24, 32, .28), 0 8px 20px rgba(16, 24, 32, .1);
  --glow: 0 0 0 1px var(--accent-line), 0 0 22px -8px rgba(34, 164, 71, .35);

  --chrome: rgba(255, 255, 255, .78);
  --rail: #0e1114;                 /* rail 永远深色，作为品牌锚点 */
  --ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}

/* rail 内部永远用深色一套文字（即使浅色主题） */
:root[data-theme="light"] .app-rail {
  --text: #e8ecef; --text-dim: #9aa3ab; --text-faint: #646d75;
  --line: rgba(255, 255, 255, .08); --surface-hover: #1b2127;
}