/**
 * Design Tokens — 海龍離岸風電官網
 * ============================================================
 * 本檔為手寫維護的 design token 層（:root CSS custom property），
 * 不進 Sass 樹，Sass 編譯流程不會碰到這個檔案。
 *
 * 為什麼不寫進 assets/front/css/_var_map.css：
 *   該路徑有對應的 Sass 來源 assets/front/sass/_var_map.scss（純
 *   $變數 / @function 定義，無任何實際 selector，單獨編譯恆為
 *   0 bytes）。若把 token 寫進 _var_map.css，下次 Sass 編譯這個
 *   partial 會把這裡的內容整檔覆寫清空，且不會有任何錯誤訊息。
 *   這條註解留給後人：看到 _var_map.css 是 0 bytes 空檔，那是
 *   正常現況，不要「好心」把本檔內容搬過去。
 *
 * 來源：/Users/dawa/山川/海龍/DESIGN.md
 *   - Tokens（Pass A）第 1-4 節（色彩／字級／間距／其他）
 *   - Components（Pass B）第 0 節「Tokens 節的三處修正（本節為
 *     權威值）」——字階與 container 的最終數值與命名以此節為準
 *
 * 維護規則：改這裡任何一個 token 的值，請同步改 DESIGN.md，反之亦然。
 * 命名規則：token 名稱逐字照抄 DESIGN.md 原文，不簡化、不改大小寫、
 *   不自創縮寫。container-page / container-bleed 採 DESIGN.md
 *   Pass B §0.2（該節標題自稱「本節為權威值」）的正式表格命名，
 *   捨棄 Pass A 散文提及、但從未進入正式定義表格的 container-gutter。
 * ============================================================
 */

:root {
  /* ---- 1.1 色彩（DESIGN.md §1.1，21 個） ---- */
  --color-brand: #005db4;
  --color-brand-deep: #0f3f66;
  --color-text-strong: #333333;
  --color-text-muted: #696969;
  --color-text-disabled: #8f8f8f;
  --color-text-inverse: #ffffff;
  --color-surface-base: #ffffff;
  --color-surface-subtle: #f4f4f4;
  --color-surface-brand: #005db4;
  --color-surface-deep: #0f3f66;
  --color-border-hairline: #ebebeb;
  --color-border-subtle: #cbcbcb;
  --color-border-strong: #8f8f8f;
  --color-border-brand: #005db4;
  --color-border-on-image: rgba(255,255,255,.5);
  --color-state-error: #cc0000;
  --color-state-focus: #005db4;
  --color-overlay-navy-50: rgba(0,18,65,.5);
  --color-overlay-navy-70: rgba(0,18,65,.7);
  --color-scrim-light: rgba(0,0,0,.3);
  --color-scrim-heavy: rgba(0,0,0,.7);

  /* ---- 2.3 字重（DESIGN.md §2.3，3 個） ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* ---- 2.1 字階（DESIGN.md §2.1，Pass B §0.1 權威修正確認數值一致，9 個）
     以下為 ≥1440（基準格）的值；窄斷點覆寫見檔尾 @media 區塊。
     line-height / letter-spacing / weight 三欄 DESIGN.md 未單獨命名
     為 token（同一 token 全斷點固定不變），故不生成新變數名，
     僅以註解記錄，供套用時參照。 */
  --type-watermark: 200px; /* line-height:1.0 letter-spacing:-0.02em weight:700(weight-bold) */
  --type-display: 120px;   /* line-height:1.0 letter-spacing:-0.01em weight:700(weight-bold) */
  --type-h1: 60px;         /* line-height:1.3 letter-spacing:0 weight:700(weight-bold) */
  --type-h2: 40px;         /* line-height:1.2 letter-spacing:0 weight:700(weight-bold) */
  --type-h3: 28px;         /* line-height:1.5 letter-spacing:0 weight:700(weight-bold) */
  --type-h4: 20px;         /* line-height:1.5 letter-spacing:0.03em weight:700(weight-bold) */
  --type-body-lg: 18px;    /* line-height:1.75 letter-spacing:0.03em weight:400(weight-regular) */
  --type-body: 16px;       /* line-height:1.75 letter-spacing:0.03em weight:400(weight-regular) */
  --type-caption: 14px;    /* line-height:1.5 letter-spacing:0.05em weight:500(weight-medium) */

  /* ---- 3.2 間距階梯（DESIGN.md §3.2，10 個） ---- */
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-5: 30px;
  --space-6: 40px;
  --space-7: 50px;
  --space-8: 80px;
  --space-9: 100px;
  --space-10: 150px;

  /* ---- 3.4 容器／內容寬（DESIGN.md §3.4 + Pass B §0.2 權威修正，3 個）
     container-page 以下為 1440–1919 基準格；≥1920 定值與 ≤1439／
     ≤1199 兩段覆寫見檔尾 @media。container-bleed 全斷點恆為 0，
     無需 @media。 */
  --container-page: 12.7604vw;
  --container-bleed: 0;
  --content-max: 1430px;

  /* ---- 4.1 斷點（DESIGN.md §4.1，5 個）
     僅供文件對照／JS 讀取用。CSS 的 @media 條件式不支援 var()，
     本檔下方所有 @media (max-width: …) 仍須手寫像素數字，
     無法寫成 @media (max-width: var(--bp-xl))。 */
  --bp-xl: 1439px;
  --bp-lg: 1199px;
  --bp-md: 991px;
  --bp-sm: 767px;
  --bp-xs: 575px;

  /* ---- 4.2 圓角（DESIGN.md §4.2，4 個）
     radius-full 原文列了兩個值：9999px 用於藥丸按鈕／100% 用於
     正圓（頭像、圓形圖示）。100% 是通用 CSS 慣例、不隨設計系統
     改變，不需要 token 化，故本 token 只取 9999px 一路；
     正圓元件請直接寫 border-radius:100%，不套用此 token。 */
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* ---- 4.3 陰影（DESIGN.md §4.3，2 個） ---- */
  --shadow-1: 5px 5px 20px rgba(0,0,0,.05);
  --shadow-2: 10px 10px 25px rgba(0,0,0,.07);

  /* ---- 4.4 動畫時長／緩動（DESIGN.md §4.4，5 個） ---- */
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(.2,0,0,1);
  --ease-fade: ease;

  /* ---- 4.5 z-index（DESIGN.md §4.5，6 個） ---- */
  --z-below: -1;
  --z-base: 0;
  --z-raised: 1;
  --z-sticky: 10;
  --z-overlay: 100;
  --z-modal: 1000;
}

/* ============================================================
 * 響應式覆寫 — type-* 字階與 container-page
 * 數值來源：DESIGN.md §2.1（字階表）與 Pass B §0.1（權威修正，
 * 兩表逐格核對數值一致）、§3.4 與 Pass B §0.2（container-page
 * 四段式，權威版）。
 *
 * 寫法：僅在數值相對於「上一個較寬斷點」實際變動時才覆寫；
 * 沒列出的 token 在該斷點沿用前一斷點的值（CSS cascade 自然
 * 延續，非遺漏）。已逐一手動模擬驗證 400px／1300px／1600px／
 * 2000px 四個檢查點的最終值與 DESIGN.md 表格逐格相符。
 * ============================================================ */

@media (max-width: 1439px) {
  :root {
    --type-watermark: 140px;
    --type-display: 90px;
    --type-h1: 48px;
    --type-h2: 36px;
    --type-h3: 26px;
    --container-page: 7.5vw;
  }
}

@media (max-width: 1199px) {
  :root {
    --type-watermark: 120px;
    --type-display: 70px;
    --type-h1: 36px;
    --type-h2: 32px;
    --type-h3: 24px;
    --type-body-lg: 17px;
    --container-page: max(5.2083vw, 20px);
  }
}

@media (max-width: 991px) {
  :root {
    --type-watermark: 80px;
    --type-display: 60px;
    --type-h2: 28px;
    --type-h3: 22px;
    --type-body-lg: 16px;
  }
}

@media (max-width: 575px) {
  :root {
    --type-watermark: 40px;
    --type-display: 52px;
    --type-h1: 32px;
    --type-h2: 24px;
    --type-h3: 20px;
    --type-h4: 16px;
  }
}

@media (min-width: 1920px) {
  :root {
    --container-page: 245px;
  }
}