@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════
   variables.css — 設計變數

   全站唯一定義顏色、字體、間距的地方。
   其他 CSS 一律使用 var(--xxx)，不直接寫色碼。
   ═══════════════════════════════════════════════════════════ */

:root{

  /* ── 顏色 ── 比例建議 85 白 / 8 粉 / 5 藍 / 2 深灰 ── */
  --c-white:   #FFFFFF;
  --c-pink:    #FFF3F5;
  --c-blue:    #E6F2F7;
  --c-ink:     #333333;
  --c-gray-1:  #F5F5F5;
  --c-gray-2:  #BDBDBD;
  --c-line:    #EDEDED;

  --c-accent:      #F4B4BC;   /* 主要按鈕 */
  --c-accent-dark: #EFA2AD;
  --c-navy:        #1F3A68;   /* 取自瓶身標籤字色 */

  /* ── 字體 ── */
  --f-tc: 'Noto Sans TC', -apple-system, BlinkMacSystemFont,
          'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --f-en: 'Inter', var(--f-tc);

  --fs-hero:  clamp(36px, 2rem + 2.4vw, 56px);
  --fs-h2:    clamp(28px, 1.55rem + 1.1vw, 40px);
  --fs-h3:    clamp(20px, 1.15rem + .5vw, 24px);
  --fs-lead:  clamp(20px, 1.15rem + .5vw, 24px);
  --fs-body:  clamp(16px, .96rem + .16vw, 18px);
  --fs-note:  16px;
  --fs-btn:   18px;

  --lh-tight: 1.3;
  --lh-base:  1.7;

  /* ── 間距：8px 基數 ── */
  --s-1:  8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;  --s-5:  48px;
  --s-6: 64px;  --s-7: 80px; --s-8: 96px; --s-9: 120px; --s-10:160px;

  /* ── 版面 ── */
  --shell:      1200px;
  --gutter:     clamp(24px, 5vw, 64px);
  --section-y:  clamp(64px, 9vw, 120px);
  --header-h:   72px;
  --floating-h: 72px;

  /* ── 圓角 ── */
  --r-btn:  12px;
  --r-card: 16px;
  --r-pill: 999px;

  /* ── 陰影 ── */
  --sh-1: 0 4px 16px rgba(0,0,0,.06);
  --sh-2: 0 8px 24px rgba(0,0,0,.08);
  --sh-3: 0 16px 40px rgba(0,0,0,.10);

  /* ── 互動回饋 ──
     這不是動畫，只是滑鼠移上去的狀態變化。
     進場動畫這一版完全沒有做。 */
  --ease:    cubic-bezier(.22,.61,.36,1);
  --t-hover: .2s;

  /* ── 層級 ── */
  --z-header:   80;
  --z-floating: 70;
}