/*
 * tokens.css — 全站唯一色彩與尺度來源（純 CSS，非 SCSS）
 * -------------------------------------------------------------------------
 * 規格出處：plan/13 第 8 節。值取自設計規範 FRONTEND_DESIGN_GUIDELINES.md
 * 第 5.2、5.3 節，不採用設計規範.png 的衝突值
 * （該圖有兩處不符其自身訂的 4.5:1 對比門檻，見 docs/DESIGN_EXCEPTIONS.md）。
 *
 * 那兩份規範檔在本地參考資料目錄中，不進版控、不部署、不進容器，
 * 因此這裡只引用檔名不寫路徑，website/ 下不得出現指向該目錄的路徑字串。
 *
 * 載入順序：Sneat 的 vendor CSS 之後、admin.css 與 site.css 之前。
 *
 * 三條硬性規則：
 *   1. 本站自有元件不得寫死色碼，一律 var(--*)（指南第 51 節、plan/13 第 8.1 節）
 *   2. 不覆寫 Sneat 與 Bootstrap 的原生變數（--bs-* 等），
 *      改了會連鎖破圖。Sneat 元件維持它原本的外觀（plan/13 第 8.6.2 節）
 *   3. 不自行新增沒有規律的新色碼、新間距、新圓角（指南第 52.1 節）
 *
 * 主題切換是兩層的：這裡是第二層（本站 Token，切 data-theme 屬性）。
 * 第一層是 Sneat 的 core.css ↔ core-dark.css 換檔，由 theme-switcher.js 處理。
 */

/* ---------------------------------------------------------------------------
 * 1. 色彩：Dark（預設主題，D12）
 * ------------------------------------------------------------------------ */
:root,
:root[data-theme="dark"] {
    --bg-page:        #0F1724;
    --bg-surface:     #182234;
    --bg-elevated:    #202C40;
    --bg-muted:       #253247;

    --text-primary:   #F5F7FB;
    --text-secondary: #B9C4D3;
    --text-muted:     #8E9BAD;
    --text-disabled:  #6F7B8B;

    --border-subtle:  #2C394D;
    --border-default: #3A495F;
    --border-strong:  #53647A;

    /* 實測對比：對 bg-page 10.57、bg-surface 9.37、bg-elevated 8.26、bg-muted 7.59 */
    --accent:         #5FD4FF;
    --accent-hover:   #82DEFF;

    /*
     * 實心主色：當白字直接壓在主色**底色**上時使用（按鈕、選中的側欄項目、
     * 選中的分頁碼）。Sneat 原值 #696CFF 配白字實測只有 4.05:1，低於 4.5:1。
     * 只調明度、色相與飽和度不變（hue 239），視覺調性與 Sneat 一致。
     *
     *   #696CFF  白字 4.05:1  ← Sneat 原值，不合格
     *   #5457FF  白字 5.01:1  ← 本站採用，留有餘裕
     *
     * 這不是覆寫 Sneat 的 --bs-primary（那會連鎖破圖），而是本站在自己的
     * 選擇器上改底色。詳見 docs/DESIGN_EXCEPTIONS.md E004。
     */
    --accent-solid:       #5457FF;
    --accent-solid-hover: #4245E8;
}

/* ---------------------------------------------------------------------------
 * 2. 色彩：Light
 * ------------------------------------------------------------------------ */
:root[data-theme="light"] {
    --bg-page:        #F4F6F8;
    --bg-surface:     #FFFFFF;
    --bg-elevated:    #FFFFFF;
    --bg-muted:       #E9EEF3;

    --text-primary:   #1F2937;
    --text-secondary: #5B6676;
    --text-muted:     #748091;
    --text-disabled:  #98A2B1;

    --border-subtle:  #DCE3EA;
    --border-default: #CBD5DF;
    --border-strong:  #AEBAC7;

    /*
     * 指南第 5.3 節的值是 --accent #327FA6 / --accent-hover #286B8D。
     * 本站改為以下兩個較深的值，理由是實測對比不足（見 DESIGN_EXCEPTIONS E003）：
     *
     *              對 bg-page  對 bg-surface  對 bg-muted
     *   #327FA6      4.11:1       4.45:1        3.81:1   ← 三者皆低於 4.5:1
     *   #2C6F8F      5.13:1       5.56:1        4.76:1   ← 本站採用
     *
     * hover 取 #1F5A76（6.97 / 7.55 / 6.47），與 accent 的差異要看得出來，
     * 不能只差一點點；common.css 另外加了底線，不靠顏色單獨傳達狀態。
     * 色相與飽和度維持原值（hue 200），只調明度，視覺調性不變。
     */
    --accent:         #2C6F8F;
    --accent-hover:   #1F5A76;

    /* 淺色主題的實心主色沿用同一組值：白字壓主色的對比與主題無關。 */
    --accent-solid:       #5457FF;
    --accent-solid-hover: #4245E8;
}

/* ---------------------------------------------------------------------------
 * 3. 狀態色（兩個主題共用；PNG 與文字準則在這三個值上一致）
 *
 * 狀態不可只靠顏色傳達，必須同時有圖示或文字（plan/13 第 8.2 節）。
 * ------------------------------------------------------------------------ */
:root {
    --success: #22C55E;
    --warning: #F59E0B;
    --danger:  #EF4444;
}

/* ---------------------------------------------------------------------------
 * 4. 間距：8px 系統
 * ------------------------------------------------------------------------ */
:root {
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
}

/* ---------------------------------------------------------------------------
 * 5. 圓角、邊框寬度、陰影
 * ------------------------------------------------------------------------ */
:root {
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:  12px;
    --radius-pill: 999px;

    --border-width: 1px;

    /* 用量節制：只有三階，需要更強的層次用 --bg-elevated 而不是加陰影 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.16);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.20);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.28);
}

/* ---------------------------------------------------------------------------
 * 6. 字級、字重、行高
 *
 * 行高：H1 1.3、H2 與 H3 1.4、內文與次要 1.6
 * （中文建議 1.5-1.8，內文取 1.6）
 * ------------------------------------------------------------------------ */
:root {
    --font-size-h1:        32px;
    --font-size-h2:        24px;
    --font-size-h3:        20px;
    --font-size-body:      16px;
    --font-size-body-lg:   18px;
    --font-size-secondary: 14px;

    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --line-height-h1:        1.3;
    --line-height-h2:        1.4;
    --line-height-h3:        1.4;
    --line-height-body:      1.6;
    --line-height-secondary: 1.6;
}

/* ---------------------------------------------------------------------------
 * 7. Z-index：集中管理，各處不得自行發明數值（指南第 45 節）
 * ------------------------------------------------------------------------ */
:root {
    --z-base:      0;
    --z-sticky:  100;
    --z-header:  200;
    --z-drawer:  300;
    --z-overlay: 400;
    --z-modal:   500;
    --z-toast:   600;
}

/* ---------------------------------------------------------------------------
 * 8. 觸控目標：可點擊區域至少 40-44px
 * ------------------------------------------------------------------------ */
:root {
    --touch-target-min:       40px;
    --touch-target-comfort:   44px;
}