/* ==========================================================================
   House16 — Design tokens
   蒙德里安骨架 × YSL 留白 × 迪士尼互動

   核心規則：黑線是主角，色彩是重音。
   彩色（紅／藍／黃）在任一畫面中的面積不得超過 8%，其餘留給畫布白與照片。
   這條規則是「不像魔術方塊」的唯一保證。
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- 顏色 ------------------------------------------------------------- */
  --canvas:      #F4F1EA;   /* 畫布白：亞麻感的米白，不是純白 */
  --canvas-lift: #FBFAF6;   /* 卡片、浮起面 */
  --paper:       #FFFFFF;
  --ink:         #0A0A0A;   /* 線條與主要文字 */
  --ink-70:      #4A4845;
  --grey:        #8A8785;   /* 次要文字 */
  --hairline:    #DDD8CC;   /* 淺分隔線 */

  --red:         #D62828;   /* 主 CTA・訂房 */
  --red-deep:    #B01F1F;
  --blue:        #1D3FA8;   /* 海洋・連結 */
  --yellow:      #F4C430;   /* hover・歡樂重音 */

  --focus:       #1D3FA8;

  /* --- 字體 ------------------------------------------------------------- */
  /* 標題走 Noto Serif TC（Google Fonts 依 unicode-range 動態切片，只下載用到的字）
     內文走系統字，零下載。 */
  --font-display: "Noto Serif TC", "Songti TC", "Source Han Serif TC", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
               "Noto Sans TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
  --font-latin: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* 字級：clamp 讓 375px 到 1440px 之間連續縮放，不靠斷點跳階 */
  --fs-display: clamp(2.75rem, 7.5vw, 5.75rem);
  --fs-h1:      clamp(2.25rem, 5.5vw, 4rem);
  --fs-h2:      clamp(1.75rem, 4vw, 2.875rem);
  --fs-h3:      clamp(1.25rem, 2.2vw, 1.625rem);
  --fs-lead:    clamp(1.0625rem, 1.5vw, 1.25rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-micro:   0.8125rem;

  /* 中文需要比西文寬鬆的行高才好讀 */
  --lh-tight: 1.18;
  --lh-snug:  1.45;
  --lh-body:  1.95;

  --ls-latin: 0.22em;   /* YSL 招牌：西文全大寫拉開字距 */
  --ls-cjk:   0.04em;

  /* --- 間距 ------------------------------------------------------------- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 4rem;
  --sp-6: 6rem;
  --section-y: clamp(4.5rem, 10vw, 9rem);

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --maxw:   1440px;
  --maxw-text: 62ch;

  /* --- 線條 ------------------------------------------------------------- */
  /* 蒙德里安的黑線。細（2px）而非粗框，避免變成格子牆。 */
  --line-w: 2px;
  --line: var(--line-w) solid var(--ink);
  --line-hair: 1px solid var(--hairline);

  /* --- 動態 ------------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-line: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  180ms;
  --dur:       420ms;
  --dur-slow:  900ms;
  --dur-draw:  1100ms;

  /* 導覽列必須在選單「之上」，否則手機選單展開時會蓋住關閉鈕（✕），
     使用者就沒有任何方法關掉選單。 */
  --z-bar: 100;
  --z-menu: 110;
  --z-nav: 120;
}

/* 使用者要求減少動態時，一律關閉位移與繪線，只保留即時狀態變化。 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
    --dur-draw: 1ms;
  }
}