/* =====================================================================
   華新麗華永續發展基金會官網 · Design Tokens v1.4（2026-09-14）
   ▸ 三層：--wl-ref-*（原始值）→ --wl-*（語意角色，開發一律引用這層）→ --wl-c-*（元件）
   ▸ 響應式：字級、margin、section spacing 在 ≤1100、≤640 重新定義，元件只引用 token 即自動適配
   ▸ 前綴 --wl-（walsin lihwa），可與網站 website/css 的 --ink／--paper 並存；新頁面請只用本檔
   ▸ 字體載入：
     https://fonts.googleapis.com/css2?family=Lexend+Exa:wght@400;500;600&family=Noto+Sans+TC:wght@400;500;600;700&display=swap
   ===================================================================== */

:root{
  /* ---------- ref · 色板 ---------- */
  --wl-ref-forest-900:#0F1F10;
  --wl-ref-forest-800:#15251A;
  --wl-ref-forest-stage:#111C11;   /* 僅限首頁 Hero 影片底色 */
  --wl-ref-leaf-300:#CFE6A6;
  --wl-ref-leaf-200:#D4EBAF;
  --wl-ref-leaf-100:#DDEEBD;
  --wl-ref-leaf-50:#E2F1C8;
  --wl-ref-cream-0:#FFFFFF;
  --wl-ref-cream-50:#FBF9F5;
  --wl-ref-cream-100:#F4EFE6;
  --wl-ref-cream-200:#EAE2D5;
  --wl-ref-area-01:#A6CDE6;
  --wl-ref-area-02:#E6D9A6;
  --wl-ref-area-03:#E6A6C8;
  --wl-ref-area-04:#CFE6A6;
  --wl-ref-area-05:#B5A6E6;
  --wl-ref-error:#9E3A28;
  --wl-ref-warning:#8A5A10;
  --wl-ref-success:#2F6B3E;
  --wl-ref-info:#2B5877;

  /* ---------- sys · 色彩角色 ---------- */
  --wl-surface:var(--wl-ref-cream-50);          /* 頁面預設底 */
  --wl-surface-alt:var(--wl-ref-cream-100);     /* 交錯區塊 */
  --wl-surface-raised:var(--wl-ref-cream-0);    /* 卡片 */
  --wl-surface-sunken:var(--wl-ref-cream-200);  /* 圖片佔位 */
  --wl-surface-inverse:var(--wl-ref-forest-900);/* 深色區塊 */

  --wl-text:var(--wl-ref-forest-800);           /* 15.23 */
  --wl-text-body:rgba(21,37,26,.80);            /* 8.13 */
  --wl-text-secondary:rgba(21,37,26,.66);       /* 5.11 */
  --wl-text-subtle:rgba(21,37,26,.50);          /* 3.16：僅 ≥24px 或裝飾 */
  --wl-text-disabled:rgba(21,37,26,.32);
  --wl-text-on-accent:var(--wl-ref-forest-800);
  --wl-text-on-dark-strong:#FFFFFF;             /* 17.16 */
  --wl-text-on-dark:var(--wl-ref-cream-100);    /* 14.98 */
  --wl-text-on-dark-body:rgba(244,239,230,.78); /* 9.49 */
  --wl-text-on-dark-secondary:rgba(244,239,230,.66); /* 7.14 */
  --wl-text-on-dark-subtle:rgba(244,239,230,.50);    /* 4.65 */
  --wl-text-on-glass:var(--wl-ref-cream-50);    /* v1.4 09-15：照片玻璃標籤上的字 */

  --wl-border-subtle:rgba(21,37,26,.08);
  --wl-border:rgba(21,37,26,.14);
  --wl-border-strong:rgba(21,37,26,.32);
  --wl-border-on-dark:rgba(244,239,230,.18);
  --wl-border-on-dark-strong:rgba(244,239,230,.40);
  --wl-border-on-media:rgba(255,255,255,.32);   /* v1.4 09-15：深底／照片上的外框按鈕 */
  --wl-border-on-glass:rgba(255,255,255,.12);   /* v1.4 09-15：深色影像上玻璃卡的內框線 */
  --wl-border-on-dark-medium:rgba(244,239,230,.32);   /* v1.4 09-15：深底上的外框圓鈕、膠囊（footer 社群鈕、.btn--on-dark、影片控制鈕） */
  --wl-focus-ring:2px solid var(--wl-ref-forest-800);
  --wl-focus-ring-on-dark:2px solid var(--wl-ref-leaf-200);

  --wl-accent:var(--wl-ref-leaf-300);
  --wl-accent-hover:var(--wl-ref-leaf-100);
  --wl-accent-on-dark:var(--wl-ref-leaf-200);
  --wl-accent-on-dark-hover:var(--wl-ref-leaf-50);
  --wl-accent-tint:rgba(207,230,166,.5);        /* v1.4 非領域內容的選中底（篩選分頁籤），與 area-04-tint 同值 */

  --wl-hover-layer:rgba(21,37,26,.05);
  --wl-press-layer:rgba(21,37,26,.08);
  --wl-hover-layer-on-dark:rgba(244,239,230,.08);

  --wl-area-01:var(--wl-ref-area-01);  --wl-area-01-tint:rgba(166,205,230,.5);
  --wl-area-02:var(--wl-ref-area-02);  --wl-area-02-tint:rgba(230,217,166,.5);
  --wl-area-03:var(--wl-ref-area-03);  --wl-area-03-tint:rgba(230,166,200,.5);
  --wl-area-04:var(--wl-ref-area-04);  --wl-area-04-tint:rgba(207,230,166,.5);
  --wl-area-05:var(--wl-ref-area-05);  --wl-area-05-tint:rgba(181,166,230,.5);

  --wl-error:var(--wl-ref-error);
  --wl-warning:var(--wl-ref-warning);
  --wl-success:var(--wl-ref-success);
  --wl-info:var(--wl-ref-info);

  --wl-glass-dark:rgba(21,37,26,.36);
  --wl-glass-dark-strong:rgba(21,37,26,.50);   /* v1.5 09-16：照片亮部上的玻璃標籤底（.36 實測最低 3.91，.50 實測 5.20） */
  --wl-glass-light:rgba(251,249,245,.75);
  --wl-glass-card:rgba(251,249,245,.20);
  --wl-glass-panel:rgba(251,249,245,.92);   /* v1.4 09-15：header 次選單面板底 */
  --wl-scrim-photo:linear-gradient(180deg,rgba(21,37,26,.55) 0%,rgba(21,37,26,.2) 13%,rgba(21,37,26,0) 26%,rgba(21,37,26,0) 46%,rgba(21,37,26,.36) 68%,rgba(21,37,26,.82) 100%);
  --wl-scrim-hero-left:linear-gradient(90deg,rgba(15,31,16,.9) 0%,rgba(15,31,16,.58) 45%,rgba(15,31,16,.14) 100%);

  /* ---------- 字體 ---------- */
  --wl-font-tc:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --wl-font-en:"Lexend Exa","Noto Sans TC",system-ui,sans-serif;
  --wl-font-mono:var(--wl-font-en);   /* v1.2 Geist Mono 淘汰：麵包屑、版權列、分隔點一律 Lexend Exa（名稱保留相容） */
  --wl-font-code:ui-monospace,SFMono-Regular,Menlo,monospace;   /* 僅限本手冊的程式碼區塊，網站不用 */

  /* ---------- 字級（expanded ≥1101 為基準；下方 media query 覆寫） ---------- */
  --wl-fs-display:72px;   --wl-lh-display:1.3;  --wl-ls-display:-.02em;
  --wl-fs-h2:44px;        --wl-lh-h2:1.3;       --wl-ls-h2:-.03em;   /* 2026-10-11 客戶回饋：桌機 48 → 44（區塊標題同級一起） */
  --wl-fs-h2-compact:32px;
  --wl-fs-h3:30px;        --wl-lh-h3:1.3;       --wl-ls-h3:-.01em;
  --wl-fs-h4:24px;        --wl-lh-h4:1.4;       --wl-ls-h4:-.02em;
  --wl-fs-h5:20px;        --wl-lh-h5:1.4;
  --wl-fs-h6:17px;        --wl-lh-h6:1.4;
  --wl-fs-lead:21px;      --wl-lh-lead:1.6;
  --wl-fs-body-l:17px;    --wl-lh-body-l:1.72;
  --wl-fs-body:16px;      --wl-lh-body:1.8;
  --wl-fs-small:14px;     --wl-lh-small:1.45;
  --wl-fs-caption:12px;   --wl-lh-caption:1.5;
  --wl-fs-overline:14px;  --wl-lh-overline:32px;
  --wl-fs-label:14px;
  --wl-fs-meta:12px;      --wl-fs-meta-l:14px;  --wl-lh-meta:1.6;
  --wl-fs-stat-l:40px;    --wl-fs-stat-m:28px;  --wl-ls-stat:-.02em;
  --wl-fs-button:15px;    --wl-lh-button:18px;
  --wl-fs-nav:14px;

  /* ---------- 間距（4px 基準） ---------- */
  --wl-space-0-5:2px; --wl-space-1:4px; --wl-space-1-5:6px; --wl-space-2:8px; --wl-space-2-5:10px;
  --wl-space-3:12px; --wl-space-3-5:14px; --wl-space-4:16px; --wl-space-4-5:18px;   /* 3-5／4-5：v1.4 09-15 補（chip、按鈕內距實際用值） */
  --wl-space-5:20px; --wl-space-6:24px; --wl-space-8:32px;
  --wl-space-10:40px; --wl-space-12:48px; --wl-space-14:56px; --wl-space-16:64px; --wl-space-20:80px;
  --wl-space-24:96px; --wl-space-30:120px;

  /* ---------- 版面 ---------- */
  --wl-margin:40px;
  --wl-gutter:24px;
  --wl-columns:12;
  --wl-container:none;         /* 流動容器：左右 margin 固定、不設最大寬（1440 時內容 1360）· v1.1 */
  --wl-container-reading:1360px;  /* 閱讀型內文頁內容上限，置中（業主 2026-09-14）· v1.2 */
  --wl-container-article:960px;   /* 內容詳細頁的標題與內文欄，置中（Wireframe「內容寬度放寬至 960」）· v1.4 */
  --wl-container-list:720px;      /* 文字清單頁（重要公告）清單寬，置中（Wireframe「寬度 720px 內」）· v1.4 */
  --wl-measure:40em;
  --wl-nav-h:68px;
  --wl-subnav-h:66px;
  --wl-section:120px;          /* standard */
  --wl-section-compact:80px;
  --wl-split-gap-tight:24px;
  --wl-split-gap:48px;
  --wl-split-gap-wide:96px;

  /* ---------- 形狀／層級 ---------- */
  --wl-radius-xs:2px;
  --wl-radius-md:8px;
  --wl-radius-lg:12px;
  --wl-radius-full:999px;
  --wl-elevation-1:0 1.667px 5.833px rgba(15,31,16,.14);
  --wl-elevation-2:0 12px 32px rgba(15,31,16,.12);
  --wl-elevation-panel:0 18px 40px -24px rgba(0,0,0,.35);   /* v1.4 09-15：次選單／下拉面板柔影 */
  --wl-blur-sm:blur(11.2px);
  --wl-blur-md:blur(16px);
  --wl-blur-lg:blur(20px) saturate(1.25);
  --wl-blur-panel:blur(14px) saturate(1.1);   /* v1.4 09-15：header 次選單面板（Figma 效果樣式 WL/Panel） */

  /* ---------- 動態 ---------- */
  --wl-dur-press:80ms;
  --wl-dur-fast:250ms;
  --wl-dur-medium:450ms;
  --wl-dur-slow:950ms;
  --wl-ease:cubic-bezier(.22,1,.36,1);
  --wl-ease-in-out:cubic-bezier(.65,0,.35,1);
  --wl-ease-curtain:cubic-bezier(.76,0,.24,1);
  --wl-nudge:3px;
  --wl-press-scale:.94;

  /* ---------- comp · 元件 ---------- */
  --wl-c-button-h:50px;
  --wl-c-button-pad:var(--wl-space-4) var(--wl-space-4-5);
  --wl-c-icon-inline:24px;
  --wl-c-icon-button:40px;
  --wl-c-icon-link:32px;
  --wl-c-icon-glyph:14px;
  --wl-c-hit-min:44px;
  --wl-c-input-h:50px;   /* v1.4 09-15：border-box 實際渲染高（padding 12×2＋行高 24＋框 1×2），原寫 48 為 min-height 下限 */
  --wl-c-tag-h:24px;
}

/* medium：641–1100 */
@media (max-width:1100px){
  :root{
    --wl-fs-display:56px;
    --wl-fs-h2:44px;
    --wl-fs-h3:26px;
    --wl-fs-h4:22px;
    --wl-fs-lead:18px;
    --wl-margin:24px;
    --wl-gutter:20px;
    --wl-columns:8;
    --wl-nav-h:64px;           /* v1.4 補齊：網站 ≤1100 header 為 64（原手冊漏寫，黏性篩選列會與 header 差 4px） */
    --wl-subnav-h:58px;
    --wl-section:80px;
    --wl-section-compact:64px;
    --wl-split-gap-wide:48px;
  }
}

/* compact：≤640 */
@media (max-width:640px){
  :root{
    --wl-fs-display:44px;
    --wl-fs-h2:32px;   /* 2026-09-16 IRON：手機區塊標題與列表標題一律 32（原 40，與 KV 44 差距太小） */
    --wl-fs-h2-compact:32px;   /* 2026-09-16 IRON：手機區塊標題與列表標題一律 32（原 40，與 KV 44 差距太小、缺中間層） */
    --wl-fs-h3:24px;
    --wl-fs-h4:20px;
    --wl-fs-h5:18px;
    --wl-fs-h6:16px;
    --wl-fs-lead:16px;         --wl-lh-lead:1.7;
    --wl-fs-body-l:16px;       --wl-lh-body-l:1.8;
    --wl-fs-stat-l:32px;
    --wl-fs-stat-m:24px;
    --wl-fs-nav:22px;          /* 手機抽屜選單 */
    --wl-margin:18px;
    --wl-gutter:16px;
    --wl-columns:4;
    --wl-section:64px;
    --wl-section-compact:56px;
    --wl-split-gap:32px;
    --wl-split-gap-wide:40px;
  }
}

/* 觸控裝置：可點區域 48×48（Material 3 accessibility）；滑鼠裝置 44 */
@media (pointer:coarse){
  :root{ --wl-c-hit-min:48px; }
}

@media (prefers-reduced-motion:reduce){
  :root{ --wl-dur-fast:1ms; --wl-dur-medium:1ms; --wl-dur-slow:1ms; --wl-nudge:0px; --wl-press-scale:1; }
}