/**
 * 設計 Token v2 — 中性為主的專業版
 *
 * v1 的問題：藍色鋪滿整站、金色到處點綴、每個區塊都在搶戲，
 * 結果是「元素很多但沒有層次」——看起來像套版。
 *
 * v2 的原則（對照 startrade-power.com 這類專業能源網站）：
 * 1. 中性色是基底（近黑 / 白 / 灰），品牌藍與金只在必要處出現
 * 2. 戲劇性集中在主視覺，其他區塊保持安靜——區塊標題 28px 而非 32px
 * 3. 圓角收斂到 10px（v1 的 20px 太圓，偏消費品調性）
 * 4. 拉丁字與數字改用 Inter，比 Alexandria 更中性、更技術感
 * 5. 留白加大，靠空間分層而不是靠邊框與陰影
 */

:root {
  /* ---- 中性色：這才是基底 ---- */
  --color-ink:        #141414;  /* 主要文字、深色區塊 */
  --color-ink-soft:   #333333;  /* 內文 */
  --color-ink-muted:  #6b7178;  /* 次要文字 */
  --color-line:       #e3e6e9;  /* 分隔線 */
  --color-surface:    #ffffff;  /* 卡片、導覽列 */
  --color-surface-2:  #f5f6f7;  /* 交替區塊底 */
  --color-surface-3:  #eceff1;  /* 更深一階的底 */

  /* ---- 品牌色：節制使用 ---- */
  --color-primary:    #20458b;  /* 辰亞企業藍（logo 色），用於標題與主要按鈕 */
  --color-primary-dk: #16305f;  /* 深一階，深色區塊底 */
  --color-primary-bg: #eef2f8;  /* 極淡藍底，僅用於標記與 hover */
  --color-accent:     #167bcd;  /* 亮藍，連結與強調（用於淺色底） */
  --color-gold:       #c8912a;  /* 金：只用在極少數重點，不再鋪滿 */
  /*
   * 太陽橘黃——取自 logo 的橘黃色弧。
   * 專門用在「深藍底上的強調」：深藍底配亮藍 accent 會藍疊藍、糊成一片，
   * 必須用互補的暖色才跳得出來。同時呼應太陽能的產業識別。
   */
  --color-solar:      #eeac29;

  /* 舊變數名保留對應，避免既有樣式一次全改壞掉 */
  --color-second:     var(--color-primary-dk);
  --color-second-bg:  var(--color-surface-2);
  --color-third:      #225f70;
  --color-text:       var(--color-ink);
  --color-text-sub:   var(--color-ink-soft);
  --color-text-muted: var(--color-ink-muted);
  --color-border:     #b9bec4;

  /* ---- 字體：Inter 負責拉丁與數字 ---- */
  --font-sans: "Inter", "Noto Sans TC", -apple-system, "Helvetica Neue", sans-serif;
  --font-num:  "Inter", "Noto Sans TC", sans-serif;

  /* ---- 字級：整體收斂一階 ---- */
  --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.75rem;    /* 28 — 區塊標題（v1 是 32） */
  --fs-3xl:  1.75rem;    /* 28 — 與 2xl 同級，避免標題大小混亂 */
  --fs-4xl:  2.25rem;    /* 36 — 頁面主標 */
  --fs-hero: clamp(2.5rem, 5.5vw, 4.25rem); /* 主視覺：唯一放大的地方 */

  /* ---- 字重：三階 ---- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* ---- 行高與字距 ---- */
  --lh-tight:   1.15;
  --lh-heading: 1.45;
  --lh-body:    1.65;   /* 對齊專業站的 16/26.4 */
  --lh-button:  1.4;
  --ls-heading: 0.01em; /* v1 的 0.05em 太鬆，中文會散 */
  --ls-button:  0.02em;
  --ls-eyebrow: 0.2em;  /* 英文小標才用大字距 */

  /* ---- 間距：加大留白 ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.25rem;
  --space-5: 3.5rem;
  --space-6: 5.5rem;   /* 區塊上內距（v1 是 4.5rem） */
  --space-7: 6.5rem;   /* 區塊下內距 */

  /* ---- 圓角：收斂 ---- */
  --radius-card:   10px;   /* v1 是 20px，太圓 */
  --radius-button: 999px;  /* 按鈕維持膠囊 */
  --radius-sm:     4px;
  --radius-full:   100%;

  /* ---- 版面 ---- */
  --container-max: 1320px;
  --container-pad: clamp(1.25rem, 5vw, 4.5rem);
  --header-height: 64px;

  /* ---- 陰影：更輕，靠留白分層而不是靠陰影 ---- */
  --shadow-header: 0 1px 0 rgba(20, 20, 20, 0.08);
  --shadow-card:   0 1px 2px rgba(20, 20, 20, 0.06);
  --shadow-lift:   0 12px 32px rgba(20, 20, 20, 0.1);
  --transition:    0.3s;
}

/**
 * 斷點備忘（CSS 變數不能用於 media query）
 * 主要手機／桌機分界：800 / 801px
 * 桌機導覽列較高：min-width 801px → 96px
 */
@media (min-width: 801px) {
  :root { --header-height: 96px; }
}