/* ════════════════════════════════════════════════════════════
   設計權杖（design tokens）
   全站唯一的顏色 / 字體 / 間距來源。要改主題只改這個檔案。
   概念：宣紙與朱印 —— 暖白紙底、墨色文字、朱紅點綴、青瓷為輔。
   ════════════════════════════════════════════════════════════ */

:root {
  /* ── 紙與墨 ── */
  --paper:        #fbf8f3;
  --paper-warm:   #f6f1e7;
  --surface:      #ffffff;
  --surface-soft: #fdfbf7;

  --ink:   #221f1b;
  --ink-2: #57514a;
  --ink-3: #8b837a;
  --ink-4: #b6afa5;

  --line:        #e7e0d4;
  --line-strong: #d9d0bf;

  /* ── 朱紅（印）── */
  --vermilion:       #a8342a;
  --vermilion-hover: #8d2a21;
  --vermilion-soft:  #f7ece9;

  /* ── 青瓷（輔）── */
  --jade:      #3f6b62;
  --jade-soft: #eaf1ef;

  /* ── 赭金（館務）── */
  --gold:      #9a7b2e;
  --gold-soft: #f7f0dd;

  /* ── Discord 品牌色（僅用於登入按鈕）── */
  --discord:       #5865f2;
  --discord-hover: #4752c4;

  /* ── 陰影 ── */
  --shadow-xs: 0 1px 2px rgba(34, 31, 27, .05);
  --shadow-sm: 0 2px 6px rgba(34, 31, 27, .06), 0 1px 2px rgba(34, 31, 27, .04);
  --shadow-md: 0 10px 30px -12px rgba(34, 31, 27, .22), 0 2px 8px rgba(34, 31, 27, .05);
  --shadow-lg: 0 30px 70px -24px rgba(34, 31, 27, .35);

  /* ── 圓角 ── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   18px;
  --radius-pill: 999px;

  /* ── 字體 ──
     刻意不使用外部 webfont：不依賴網路、不被 CSP 限制，且中文字形以系統字最穩。
     標題用宋體（明體）帶出東方感，內文用黑體維持明亮簡潔。 */
  --font-serif: "Songti TC", "Source Han Serif TC", "Noto Serif TC", "STSong",
                "PMingLiU", "MingLiU", "SimSun", Georgia, serif;
  --font-sans:  "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Microsoft YaHei",
                "Heiti TC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* 序號、指令這類需要字元易辨識的內容（0/O、1/l 要分得出來） */
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* ── 版面 ── */
  --container: 1120px;
  --gutter:    24px;
  --header-h:  68px;

  /* ── 節奏 ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 56px;
  --space-16: 80px;

  --section-y: clamp(64px, 9vw, 116px);
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
}
