/* ===================================================================
   全站設計變數（單一真實來源）
   換色 / 調整間距只需改這一個檔案。
   由 header.php 載入（所有 include header.php 的頁面共用），
   獨立頁面（checkout、login、redeem 等）於各自 <head> 引入。
   頁面如需局部覆蓋，於該頁 inline <style> 的 :root 定義「頁面專屬」變數即可。
   =================================================================== */
:root {
    /* ── 品牌主色 ─────────────────────────────────── */
    --primary-color:    #0073e6;
    --primary-dark:     #005bb3;
    --primary-light:    #dbe9ff;
    --primary-gradient: linear-gradient(135deg, #0073e6, #005bb3);

    /* ── 輔助色 ───────────────────────────────────── */
    --secondary-color:  #6c757d;
    --accent:           #22c55e;
    --accent-2:         #16a34a;

    /* ── 語意色 ───────────────────────────────────── */
    --success-color:    #20c997;
    --danger-color:     #f25c54;
    --warning-color:    #ffb830;
    --info-color:       #0ea5e9;

    /* ── 文字色 ───────────────────────────────────── */
    --dark-color:       #212529;
    --text-color:       #343a40;
    --text-muted:       #6c757d;
    --text-light:       #adb5bd;

    /* ── 背景 / 介面 ──────────────────────────────── */
    --background-color: #f9fbfd;
    --card-bg:          #ffffff;
    --light-color:      #f8f9fa;

    /* ── 邊框 ─────────────────────────────────────── */
    --border-color:     #e9ecef;

    /* ── 陰影（三層次）────────────────────────────── */
    --shadow-sm:        0 2px 8px rgba(0,115,230,0.06);
    --shadow:           0 8px 30px rgba(0,115,230,0.08);
    --shadow-lg:        0 16px 48px rgba(0,115,230,0.14);

    /* ── 圓角（四層次）────────────────────────────── */
    --radius-sm:        8px;
    --border-radius:    16px;
    --radius-lg:        24px;
    --radius-full:      9999px;

    /* ── 動畫 ─────────────────────────────────────── */
    --transition:       all 0.4s cubic-bezier(0.25,0.8,0.25,1);
    --transition-fast:  all 0.15s ease;

    /* ── 別名（相容各頁面舊有命名）────────────────── */
    --primary:          var(--primary-color);
    --primary-2:        var(--primary-dark);
    --danger:           var(--danger-color);
    --warning:          var(--warning-color);
    --ink:              var(--dark-color);
    --muted:            var(--text-muted);
    --paper:            var(--card-bg);
    --soft:             var(--light-color);
}
