/* MgentOps 工作中心 · Design tokens v2「深色指揮中心」
   深藍黑底＋面板層次＋單一信號色（電光青藍）貫穿主動作與執行中；
   語意色調亮以確保深底對比；等寬字負責編號/時間/金鑰的儀表感。
   深色為預設；prefers-color-scheme: light 或 data-theme="light" 時覆寫為淺色版。 */
:root {
  /* 表面：由深到浅的三層海軍藍黑 */
  --bg: #0b111a;
  --surface: #121a26;
  --surface-2: #1a2535;
  --line: #243245;
  --line-strong: #35475f;
  --ink: #e8eef6;
  --ink-2: #aebccd;
  --ink-3: #7b8ca1;
  /* 信號色：電光青藍（主要動作、選取、焦點、連結） */
  --accent: #38c0f2;
  --accent-hover: #63d0f8;
  --accent-ink: #04121c;
  --accent-soft: #11354a;
  /* 語意色（深底調亮版） */
  --ok: #4fd68f;      --ok-soft: #10311f;
  --warn: #f2b84b;    --warn-soft: #3a2c0d;
  --crit: #ff7a6e;    --crit-soft: #44201b;
  --info: #38c0f2;    --info-soft: #11354a;
  --teal: #3fd9c5;    --teal-soft: #0d332d;
  --review: #c9a6ff;  --review-soft: #2e2347;
  --neutral: #93a3b6; --neutral-soft: #202c3c;
  --demo: #f2b84b;    --demo-soft: #332810;
  --focus: #63d0f8;
  --scrim: rgba(2, 6, 12, 0.66);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 12px 40px rgba(0, 0, 0, 0.6);
  /* 面板頂緣高光與品牌光暈（純裝飾） */
  --edge: rgba(255, 255, 255, 0.045);
  --glow: radial-gradient(1200px 600px at 15% -10%, rgba(56, 192, 242, 0.14), transparent 60%),
          radial-gradient(900px 500px at 110% 110%, rgba(63, 217, 197, 0.08), transparent 55%);
  color-scheme: dark;

  /* 字型 */
  --font-sans: "IBM Plex Sans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* 字級（1.125 階） */
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 26px;
  --lh-tight: 1.3; --lh-body: 1.6;

  /* 間距（4 倍數） */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* 圓角與尺寸 */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;
  --side-w: 236px; --tabbar-h: 60px; --control-h: 36px;
}

:root[data-theme="light"] {
  --bg: #eef1f6; --surface: #ffffff; --surface-2: #e3e9f1; --line: #d2dae4; --line-strong: #a9b6c6;
  --ink: #121c28; --ink-2: #3d4c5e; --ink-3: #5e6e82;
  --accent: #0b7fb8; --accent-hover: #096a9a; --accent-ink: #ffffff; --accent-soft: #dcf0fa;
  --ok: #177247; --ok-soft: #ddf2e6; --warn: #8a5300; --warn-soft: #faeed6; --crit: #bb2d20; --crit-soft: #fce3df;
  --info: #0b7fb8; --info-soft: #dcf0fa; --teal: #0c6f63; --teal-soft: #d9f1ed; --review: #6d44ac; --review-soft: #ece4f9;
  --neutral: #556374; --neutral-soft: #e7ecf2; --demo: #8a5300; --demo-soft: #fdf3dc;
  --focus: #0b7fb8; --scrim: rgba(15, 23, 32, 0.45);
  --shadow-1: 0 1px 2px rgba(18, 28, 40, 0.07), 0 2px 8px rgba(18, 28, 40, 0.05);
  --shadow-2: 0 10px 36px rgba(18, 28, 40, 0.2);
  --edge: rgba(255, 255, 255, 0.6);
  --glow: radial-gradient(1200px 600px at 15% -10%, rgba(11, 127, 184, 0.08), transparent 60%);
  color-scheme: light;
}