/* ==========================================================================
   MQ88 — Design Tokens
   全站共用的顏色、字級、間距。其他樣式一律引用這裡的變數，不各自硬寫顏色。
   視覺基準：02-elementor/preview-shots/v2-after/
   ========================================================================== */

:root {
  /* Surface — 交替使用，避免全站純白 */
  --mq-warm-white: #FBF9F5;   /* 階 1 — 最亮 */
  --mq-oatmeal:    #F0EADF;   /* 階 2 — 拉開與階 1 的差距，看得出換區 */
  --mq-beige:      #E5DBC9;   /* 階 3 — 收尾用，最暖 */
  --mq-wood:       #C9B49A;

  /* Text — 深暖灰，不使用純黑 */
  --mq-ink:        #33302B;
  --mq-ink-soft:   #5C574F;
  --mq-ink-muted:  #857F74;

  /* Accent — 低飽和自然綠 / 棕 */
  --mq-green:      #6E7F63;
  --mq-green-deep: #55654B;
  --mq-brown:      #8A6F55;

  /* Line */
  --mq-line:       #DED5C6;
  --mq-line-soft:  #EAE3D7;

  /* Radius / Shadow — 柔和，不做強烈陰影與玻璃擬態 */
  --mq-radius-sm:  6px;
  --mq-radius:     12px;
  --mq-radius-lg:  20px;
  --mq-shadow:     0 1px 2px rgba(51, 48, 43, .04), 0 8px 24px rgba(51, 48, 43, .05);

  /* Spacing scale */
  --mq-space-2:  8px;
  --mq-space-3:  12px;
  --mq-space-4:  16px;
  --mq-space-6:  24px;
  --mq-space-8:  32px;
  --mq-space-12: 48px;
  --mq-space-16: 64px;
  --mq-section-y: clamp(56px, 7vw, 112px);
  --mq-gutter:    clamp(20px, 5vw, 40px);
  --mq-maxw:      1180px;

  /* Typography — 繁體中文閱讀優先 */
  --mq-font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Hiragino Sans TC",
             system-ui, -apple-system, "Segoe UI", sans-serif;

  --mq-fs-eyebrow: clamp(12px, 0.55rem + 0.35vw, 14px);
  --mq-fs-h1:      clamp(30px, 1.55rem + 2.4vw, 56px);
  --mq-fs-h2:      clamp(23px, 1.25rem + 1.3vw, 36px);
  --mq-fs-h3:      clamp(18px, 1.02rem + 0.5vw, 22px);
  --mq-fs-body:    clamp(15px, 0.92rem + 0.22vw, 17px);
  --mq-fs-small:   clamp(13px, 0.82rem + 0.12vw, 15px);
  --mq-fs-caption: 13px;

  --mq-lh-tight: 1.32;
  --mq-lh-body:  1.85;

  /* Hero 影像 — 由 WordPress 媒體庫上傳後於此覆寫（見 README 步驟 4）
     未設定時自動退回無圖的暖色版面，不會出現破圖。 */
  --mq-hero-desktop: none;
  --mq-hero-mobile:  none;
}