/* 色彩代號 —— 全站唯一的顏色來源
 *
 * 規則只有一條：**任何 CSS 都不准再寫死色碼**，一律 var(--color-*)。
 * 換一個品牌只要改這份的第一段，或在後台「外觀 › 自訂 › 品牌色彩與識別」覆寫。
 *
 * 為什麼要這樣：先前顏色分三處打架 —— 這份（腳本產生的橘）、style.css 的
 * :root（手寫的棕）、後台品牌面板，靠 CSS 載入順序決勝負，改了 A 沒改 B
 * 就會不一致。現在基準值只有這份，後台覆寫是唯一的例外入口。
 *
 * 分兩段：
 *   第一段 基準色  —— 後台可逐項覆寫，是「要調的東西」
 *   第二段 衍生色  —— 由基準色算出來，不可單獨調，改基準色整組跟著變
 *
 * 這份是手寫維護的。docs/tools/unify-colors.py 是當初一次性把散落色碼
 * 收斂成代號的遷移工具，代號定型後不應再執行（會用色距重新分群並蓋掉命名）。
 */

/* ══════════════════════════════════════════════════════════
   第一段：基準色 —— 後台「品牌色彩與識別」可逐項覆寫
   ══════════════════════════════════════════════════════════ */
:root {
  /* ── 品牌三主色 ──
     改這三個會連動整組深淺變體（按鈕 hover、深色底、半透明色調）。 */
  --color-primary: #b07fcb;   /* 主紫：主要按鈕、價格、連結、重點文字 */
  --color-secondary: #1a1a1a; /* 深色：深底按鈕、深色區塊、頁尾、頁首 */
  --color-accent: #b886cf;    /* 強調紫：小標籤、裝飾線、圖示、次要強調（取自設計稿匯出）*/

  /* ── 品牌粉與品牌黃 ──
     用在：
       粉 — 頁首選單 hover 文字、NEW 標章底、收藏愛心與其 hover 填色、
            時間軸的描述文字
       黃 — 頁首選單底線、Hero 英文副標、區塊小標籤、深色底上的小字 */
  --color-pink: #ffd5d5;
  --color-yellow: #feedb7;

  /* ── 品牌漸層 ──
     刻意與上面的粉／黃分開。設計稿的漸層是 #efa2f0 → #fffca1，
     比 --color-pink / --color-yellow 飽和得多。先前為了少一組開關把漸層
     指向那兩個色，實際對到設計稿才發現是四個不同的顏色。
     用在：訂閱按鈕、浮動社群圖示外框、時間軸「穩定」的漸層字。 */
  --color-gradient-from: #efa2f0;
  --color-gradient-via: #d9a4d9;  /* 中段（設計稿是兩段式漸層，此值為內插）*/
  --color-gradient-to: #fffca1;

  /* ── 區塊底色 ── */
  --color-soft: #fde7ec;    /* 淡粉區塊：版權條、信任標章列、最近瀏覽 */
  --color-bg-grey: #f5f5f5; /* 淺灰區塊：商品列表底、表單欄位底 */

  /* ── 框線 ── */
  --color-border: #d9d9d9;

  /* ── 文字四階 ──
     只有四階是刻意的。原本有十階（#111/#1a1a1a/#333/#444/#555/#666/
     #777/#888/#999/#655b56），肉眼分不出來卻要各自維護。 */
  --color-text: #111111;        /* 內文 */
  --color-text-strong: #333333; /* 標題（H2/H3）與加重文字 */
  --color-text-muted: #666666;  /* 次要資訊：日期、規格、頁尾連結 */
  --color-text-light: #888888;  /* 說明文字、欄位提示、佔位字 */

  /* ── 頁首／頁尾 ──
     留白代表跟著品牌色走。獨立出來是因為深色頁首配白字、淺色頁首配黑字，
     兩者要成對調整，散在各處改一半就會變成白底白字。 */
  /* 頁首是純黑，不跟著「深色」—— 設計稿上頁首比其他深色區塊更黑。 */
  --color-header-bg: #000000;
  --color-header-text: #ffffff;
  /* 頁首選單 hover／目前頁：文字用品牌粉、底線用品牌黃。 */
  --color-header-link-hover: var(--color-pink);
  --color-header-underline: var(--color-yellow);

  --color-footer-bg: var(--color-secondary);
  --color-footer-text: var(--color-white);

  /* ── 狀態色 ──
     訂單徽章與提示框用。四種語意各一個色，深淺由下面算出來。
     原本「已出貨」的藍、「待付款」的琥珀色是直接寫死在 member-center.css，
     換品牌時找不到、也調不了。 */
  --color-danger: #d9534f;  /* 錯誤、取消、缺貨 */
  --color-success: #4caf50; /* 成功、已完成 */
  --color-info: #1e73af;    /* 資訊、已出貨 */
  --color-warning: #f9a825; /* 待處理、待付款 */

  /* ── 黑白（不是品牌色，不開放調整）── */
  --color-white: #ffffff;
  --color-black: #000000;
}

/* ══════════════════════════════════════════════════════════
   第二段：衍生色 —— 由上面算出來，不要單獨改
   ══════════════════════════════════════════════════════════ */
:root {
  /* 主色深淺 */
  --color-primary-dark: color-mix(in srgb, var(--color-primary) 85%, #000);
  --color-primary-deep: color-mix(in srgb, var(--color-primary) 30%, var(--color-secondary));
  --color-primary-soft: color-mix(in srgb, var(--color-primary) 12%, #fff);

  /* 深色深淺：深色底上再壓一層的漸層與陰影 */
  --color-secondary-dark: color-mix(in srgb, var(--color-secondary) 80%, #000);
  --color-secondary-deep: color-mix(in srgb, var(--color-secondary) 45%, #000);
  --color-secondary-deeper: color-mix(in srgb, var(--color-secondary) 65%, #000);

  /* 點綴淺色 = 品牌黃。用在深色底上的小字與標籤（Hero 小標、團隊職稱…）。
     注意是指向 --color-yellow 而不是漸層終點 —— 漸層是另一組更飽和的顏色。 */
  --color-accent-light: var(--color-yellow);

  /* 框線與灰階 */
  --color-border-light: color-mix(in srgb, var(--color-border) 45%, #fff);
  --color-grey: color-mix(in srgb, var(--color-border) 80%, #000);

  /* 狀態色的淺底與深字（提示框、訂單徽章用）。
     四種狀態一律「12~14% 當底色、55~70% 混黑當文字」，比例統一，
     不必每個徽章各自挑一組看起來差不多的色。 */
  --color-danger-light: color-mix(in srgb, var(--color-danger) 12%, #fff);
  --color-danger-dark: color-mix(in srgb, var(--color-danger) 70%, #000);
  --color-success-light: color-mix(in srgb, var(--color-success) 14%, #fff);
  --color-success-dark: color-mix(in srgb, var(--color-success) 55%, #000);
  --color-info-light: color-mix(in srgb, var(--color-info) 12%, #fff);
  --color-info-dark: color-mix(in srgb, var(--color-info) 85%, #000);
  --color-warning-light: color-mix(in srgb, var(--color-warning) 14%, #fff);
  --color-warning-dark: color-mix(in srgb, var(--color-warning) 70%, #000);

  /* ── 品牌漸層 ──
     所有品牌漸層都用這兩個，不要在各頁 CSS 自己寫 linear-gradient，
     否則換色時又會漏掉。橫向給色條與按鈕，直向給 Banner 與區塊底。 */
  --gradient-brand: linear-gradient(
    90deg,
    var(--color-gradient-from) 0%,
    var(--color-gradient-via) 50%,
    var(--color-gradient-to) 100%
  );
  --gradient-brand-vertical: linear-gradient(
    180deg,
    var(--color-gradient-from) 0%,
    var(--color-gradient-via) 50%,
    var(--color-gradient-to) 100%
  );
  /* 斜向：卡片、標章、圓形圖示底 */
  --gradient-brand-diagonal: linear-gradient(
    135deg,
    var(--color-gradient-from) 0%,
    var(--color-gradient-via) 50%,
    var(--color-gradient-to) 100%
  );
}