:root {
  /* === 基礎色盤 === */
  --color-bg-primary: #1a1a1a;
  --color-bg-secondary: #242424;
  --color-bg-dark: #0e0e0e;

  /* === 強調色 === */
  --color-accent-gold: #d4af37;
  --color-accent-gold-dim: rgba(212, 175, 55, 0.3);
  --color-accent-gold-glow: rgba(212, 175, 55, 0.15);
  --color-accent-cyan: #5a8a9a;
  --color-accent-cyan-dim: rgba(90, 138, 154, 0.4);
  --color-accent-brown: #8b7355;
  --color-accent-brown-dim: rgba(139, 115, 85, 0.4);
  --color-accent-white: #e8e8e8;
  --color-accent-white-dim: rgba(232, 232, 232, 0.4);
  --color-accent-blue: #4a6fa5;

  /* === 文字色 === */
  --color-text-primary: #e8e8e8;
  --color-text-secondary: #a0a0a0;
  --color-text-dim: #666666;
  --color-error: #c84630;

  /* === 字體 === */
  --font-serif-zh: "Noto Serif TC", serif;
  --font-sans-zh: "Noto Serif TC", sans-serif;
  --font-serif-en: "Cormorant Garamond", serif;
  --font-serif-en-body: "EB Garamond", serif;

  /* === 動畫時長（儀式感 = 慢） === */
  --duration-instant: 0.1s;
  --duration-fast: 0.3s;
  --duration-normal: 0.6s;
  --duration-slow: 1.2s;
  --duration-ritual: 1.8s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ritual: cubic-bezier(0.4, 0, 0.2, 1);

  /* === 邊框漸層 === */
  --border-gold-gradient: linear-gradient(135deg,
      rgba(212, 175, 55, 0.6) 0%,
      rgba(212, 175, 55, 0.2) 50%,
      rgba(212, 175, 55, 0.5) 100%);
}

/* === 移動端變數覆蓋 === */
@media (max-width: 480px) {
  :root {
    /* 縮短動畫時長，提升移動端體驗 */
    --duration-slow: 0.8s;
    --duration-ritual: 1.2s;
  }
}

@media (max-width: 375px) {
  :root {
    /* 超小螢幕進一步縮短 */
    --duration-slow: 0.6s;
    --duration-ritual: 1.0s;
  }
}