/* =============================================================
   和肽生醫 HelixTide Biomedical — 設計 Token（階段 4.7：Great Wave 神奈川沖浪裏）
   色彩方案：葛飾土藍（#2E5EAA）＋靜謐青綠（#5B8B80）雙訊號
   ＋ 淡浪藍（#A5C4D4）／淺石灰（#E0E0E0）／暖砂米（#D6C6AD）五色 Hokusai 體系
   來源：card.png（Great Wave 配色提案）
   字型：Bricolage Grotesque（EN 展示體）＋ Noto Sans TC 900（CN 大標）＋ Noto Sans TC（內文）
   版本：v0.8 對應 WORK_PLAN.md §2（Great Wave CI ＋ 視差滾動）
   ============================================================= */

:root {
  /* ---------- 1. 品牌色（主站 Great Wave：葛飾土藍 + 靜謐青綠 + 浪花暖砂） ---------- */
  --ht-primary:        #2E5EAA; /* 葛飾土藍（Hokusai earth blue）：CTA、強調、關鍵強音 */
  --ht-primary-600:    #1F4D8E; /* 主色按壓態（深一階） */
  --ht-primary-700:    #163D6F; /* 深藍（Footer 深底白字） */
  --ht-primary-50:     #E8EFF7; /* 極淡藍 tint（hover 底、tag 底） */
  --ht-secondary:      #5B8B80; /* 次色 靜謐青綠（muted teal）：副標、連結 hover、eyebrow 信號 */
  --ht-secondary-600:  #4A7369;
  --ht-secondary-700:  #3B5C54;
  --ht-secondary-50:   #E8F0EE;
  --ht-tertiary:       #A5C4D4; /* 淡浪藍（pale wave）：柔和背景、tint 層、引用 */
  --ht-tertiary-600:   #7FA5B5;
  --ht-tertiary-50:    #EAF2F7;
  --ht-accent:         #D6C6AD; /* 暖砂米（warm sandy foam）：icon、徽章、引用、分隔 */
  --ht-accent-600:     #C2AC8B;
  --ht-accent-50:      #F4EDE0;
  --ht-neutral:        #E0E0E0; /* 淺石灰：分隔線、靜默描邊 */
  --ht-highlight:      #3DA89B; /* 亮青綠：hover、焦點外光暈、互動高光（由次色提亮） */

  /* ---------- 2. 語意色（由品牌色派生，冷調 Hokusai 體系） ---------- */
  --ht-bg:             #FBFCFD; /* 全站背景（極淺冷白，Hokusai 浪花白） */
  --ht-bg-alt:         #F1F4F7; /* 區塊交替（淡浪藍 tint） */
  --ht-bg-warm:        #F4EDE0; /* 暖砂米面（強調區段、品牌故事帶） */
  --ht-surface:        #FFFFFF; /* 卡片底（純白） */
  --ht-surface-2:      #FBFCFD; /* 主底（同 bg，保留向後相容） */
  --ht-text:           #14283D; /* 主要文字（深岩墨藍黑） */
  --ht-text-2:         #2E3F55; /* 次要標題 */
  --ht-muted:          #6A7787; /* 次要文字、說明（冷灰） */
  --ht-on-primary:     #FBFCFD; /* 主色鈕上的文字 */
  --ht-on-dark:        #F0F4F8; /* 深底上的文字（淺浪白） */
  --ht-border:         rgba(20, 40, 61, 0.10);          /* 冷墨淡描邊 */
  --ht-border-strong:  rgba(20, 40, 61, 0.18);
  --ht-shadow-color:   rgba(20, 40, 61, 0.08);
  --ht-shadow-color-lg:rgba(20, 40, 61, 0.16);

  /* 品牌漸層（Hokusai 海天一色） */
  --ht-gradient-hero:  linear-gradient(135deg, #163D6F 0%, #2E5EAA 52%, #5B8B80 100%);
  --ht-gradient-soft:  linear-gradient(180deg, #FBFCFD 0%, #F1F4F7 100%);
  --ht-gradient-signal:linear-gradient(135deg, #2E5EAA 0%, #5B8B80 100%);
  --ht-gradient-foam:  linear-gradient(135deg, #A5C4D4 0%, #FBFCFD 100%);

  /* ---------- 3. 子品牌：Le' Esponeux 御絲芃 CI（暖砂米 × 靜謐青綠，與 Great Wave 同源） ---------- */
  --le-primary:     #D6C6AD; /* 暖砂米（warm sandy foam）：子品牌主色，髮品溫暖感 */
  --le-primary-600: #C2AC8B;
  --le-primary-700: #A89478; /* 深砂（Footer、標題強音） */
  --le-secondary:   #5B8B80; /* 靜謐青綠（Great Wave 次色）：副標、信號 */
  --le-sand:        #D6C6AD;
  --le-cream:       #F4EDE0;
  --le-leaf:        #5C7A5A; /* 自然綠（保留，髮品植感） */
  --le-text:        #3A2E20; /* 暖深褐（與暖砂同色系，文字可讀） */
  --le-on-dark:     #F3EFE6;
  --le-gradient:    linear-gradient(135deg, #A89478 0%, #D6C6AD 55%, #5B8B80 100%);

  /* ---------- 4. 字型（v0.9：全面無襯線展示體，Bricolage Grotesque + Noto Sans TC 900） ---------- */
  --font-cn:    "Noto Sans TC", -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", "Segoe UI", sans-serif;
  --font-en:    -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-ja:    "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Microsoft JhengHei", sans-serif;
  --font-serif: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; /* v0.9 停用襯線；保留 token 以免舊引用斷裂 */
  --font-display: "Bricolage Grotesque", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; /* 大標展示：拉丁走 Bricolage，CJK 回退 Noto Sans TC */
  --font-display-cn: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;                     /* 純 CN 大標（無襯線展示體 900） */

  /* ---------- 5. 字階（1.25 比例，base 16px） ---------- */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 */
  --fs-lg:   1.25rem;   /* 20 */
  --fs-xl:   1.5rem;    /* 24 */
  --fs-2xl:  1.875rem;  /* 30 */
  --fs-3xl:  2.5rem;    /* 40 */
  --fs-4xl:  3.25rem;   /* 52 */
  --fs-5xl:  4rem;      /* 64 */
  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-base:  1.7;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* ---------- 6. 間距比例（4px 基準） ---------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 7rem;     --sp-10: 10rem;   --sp-11: 13rem;

  /* ---------- 7. 圓角（溫潤大圓角 + 膠囊） ---------- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---------- 8. 陰影（冷墨分層，Hokusai 海霧感） ---------- */
  --shadow-sm:  0 1px 2px rgba(20,40,61,0.05), 0 4px 14px var(--ht-shadow-color);
  --shadow-md:  0 6px 16px rgba(20,40,61,0.07), 0 16px 40px var(--ht-shadow-color-lg);
  --shadow-lg:  0 14px 36px rgba(20,40,61,0.12), 0 40px 90px rgba(20,40,61,0.16);
  --shadow-glow:0 0 0 4px rgba(46, 94, 170, 0.22); /* 焦點光暈（葛飾土藍信號） */

  /* ---------- 9. 動效（遵守 prefers-reduced-motion） ----------
     曲線依「物理減速」原則：expo 最果斷、quart 為預設、quint 略快。
     全面停用 bounce／elastic —— 真實物件停止時是減速，不是回彈。 */
  --dur-instant: 120ms;   /* 立即回饋：按壓、切換色 */
  --dur-fast:    200ms;   /* 狀態變化：hover、focus */
  --dur:         320ms;   /* 版面變化：抽屜、展開 */
  --dur-slow:    560ms;   /* 進場：區塊浮起 */
  --dur-reveal:  760ms;   /* 招牌動效：hero 編排 */

  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);   /* 招牌動效：果斷、有份量 */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);   /* 預設：滑順、精緻 */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);  /* 微互動：略快 */
  --ease-in:        cubic-bezier(0.7, 0, 0.84, 0);   /* 離場（比進場快 75%） */
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);  /* 來回切換 */
  --ease-out:       cubic-bezier(0.25, 1, 0.5, 1);   /* 相容舊引用，同 quart */

  /* ---------- 10. 版面 ---------- */
  --container:        1080px;
  --container-narrow: 760px;
  --nav-h:            64px;

  /* ---------- 11. 層級 ---------- */
  --z-nav:   100;
  --z-drawer:110;
  --z-overlay:120;
  --z-toast: 200;
}