/* ZeitFrei 控制面板 — 設計 token（唯一真相，對應 AGENTS.md §8.3）
   規則：任何顏色、間距、圓角都必須來自這裡，元件檔不得寫死色碼。 */

:root {
  color-scheme: light;

  /* 表面：頁面底 / 卡片 / 弱底 */
  --bg: #f7f8fa;
  --bg-elev: #ffffff;
  --bg-soft: #eef0f4;
  --bg-sunken: #e7eaef;

  /* 文字 */
  --text: #14161a;
  --text-2: #5a6068;
  --text-3: #868d97;
  --text-on-accent: #ffffff;

  /* 線條 */
  --line: #e1e4ea;
  --line-strong: #cdd2db;

  /* 主 accent：Discord 藍系，單色，不搭第二主色 */
  --focus: #5865f2;
  --focus-hover: #4753e0;
  --focus-soft: rgba(88, 101, 242, 0.12);
  --focus-ring: rgba(88, 101, 242, 0.38);

  /* 狀態 */
  --ok: #1f9254;
  --ok-soft: rgba(31, 146, 84, 0.12);
  --warn: #a2670a;
  --warn-soft: rgba(162, 103, 10, 0.12);
  --danger: #c0353a;
  --danger-soft: rgba(192, 53, 58, 0.12);

  /* 伺服器圖示底板：固定深灰，避免白 logo 在亮色模式消失（§8.3） */
  --avatar-plate: #3c3f46;

  /* 形狀 */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* 陰影：輕，靠表面與線條分層而不是靠陰影堆疊 */
  --shadow-sm: 0 1px 2px rgba(16, 20, 28, 0.05);
  --shadow: 0 2px 8px rgba(16, 20, 28, 0.06), 0 1px 2px rgba(16, 20, 28, 0.04);
  --shadow-lg: 0 14px 40px rgba(16, 20, 28, 0.12);

  /* 間距刻度（4 的倍數） */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* 字體 */
  --font: "Noto Sans TC", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;

  /* 版面 */
  --max-wide: 1120px;
  --topbar-h: 60px;

  /* 動效（§8.2.5：進場 ≤0.6s、互動 150–200ms） */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-enter: 520ms;
}

html.dark {
  color-scheme: dark;

  --bg: #0f1116;
  --bg-elev: #171a21;
  --bg-soft: #1d212a;
  --bg-sunken: #12151b;

  --text: #eceef2;
  --text-2: #a3aab6;
  --text-3: #767e8b;

  --line: #262b35;
  --line-strong: #353c48;

  --focus: #6d7cff;
  --focus-hover: #8390ff;
  --focus-soft: rgba(109, 124, 255, 0.16);
  --focus-ring: rgba(109, 124, 255, 0.45);

  --ok: #3ecf8e;
  --ok-soft: rgba(62, 207, 142, 0.14);
  --warn: #e0a34a;
  --warn-soft: rgba(224, 163, 74, 0.14);
  --danger: #f0656b;
  --danger-soft: rgba(240, 101, 107, 0.14);

  --avatar-plate: #2b2d31;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-enter: 1ms;
  }
}