/* =========================================================
 * site-token.css — 前台設計 token
 * ---------------------------------------------------------
 * 載入順序:bootstrap → site-token → site → content → select2 → 各頁的第三方 / RCL 樣式
 *
 * 原則
 *   1. Bootstrap 已有的值直接用 Bootstrap 的變數(--bs-*),這裡只覆寫需要換成主題色的那幾個。
 *   2. Bootstrap 沒有的值才定義自有 token,一律 --nv- 前綴。
 *   3. Bootstrap 的間距、字級刻度沒有對應的 CSS 變數,這裡以 --nv- 補上同值的 token,
 *      註解標示「= Bootstrap ...」的就是這一類。
 *   4. 寬、高等版面尺寸與百分比不在 token 範圍內,只有與行高成對的尺寸才定義 --nv-size-*。
 *
 * 內容
 *   1. Bootstrap 主題覆寫
 *   2. 色彩
 *   3. 字型:字級、字重、行高
 *   4. 間距
 *   5. 尺寸
 *   6. 圓角
 *   7. 陰影與 focus ring
 *   8. z-index
 *   9. 動態時間
 *  10. 第三方元件:FileUploader
 * ======================================================= */

:root {
    /* ---------- 1. Bootstrap 主題覆寫 ---------- */

    /* 主色:深綠。按鈕、連結、focus ring、.text-primary / .bg-primary / .border-primary 都跟著它 */
    --bs-primary: #15827C;
    --bs-primary-rgb: 21, 130, 124;

    /* 主色的淺底:Bootstrap 以主色調出(tint 80%)。accordion 展開列、場地卡片會用到 */
    --bs-primary-bg-subtle: #D0E6E5;

    --bs-link-color: #15827C;
    --bs-link-color-rgb: 21, 130, 124;
    --bs-link-hover-color: #137570;
    --bs-link-hover-color-rgb: 19, 117, 112;

    --bs-body-font-family: 微軟正黑體, Avenir, Helvetica, Arial, sans-serif;

    --bs-focus-ring-color: rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity));

    /* ---------- 2. 色彩 ---------- */

    /* 以下沿用 Bootstrap 原生變數,不另外定義:
         白 --bs-white、黑 --bs-black(rgb 分量 --bs-white-rgb、--bs-black-rgb)
         紅 --bs-danger、灰 --bs-secondary、淺灰底 --bs-gray-300、邊框 --bs-border-color
         內文 --bs-body-color */

    /* 品牌色:亮綠。區塊底色、標題列、頁籤。
       滑鼠移入時變深用主色(--bs-primary),淺底用 --bs-primary-bg-subtle,不另外定義 */
    --nv-brand: #20B2AA;

    /* 主色(--bs-primary)的互動狀態:滑鼠移入與按下共用。連結的移入色 --bs-link-hover-color 是同一個值 */
    --nv-primary-active: #137570;

    /* 強調色:橘 */
    --nv-accent: #EF9002;
    --nv-accent-rgb: 239, 144, 2;
    /* 橘色按鈕滑鼠移入與按下的底色:強調色壓深 12%,由 --nv-accent 算出,不另外定義色碼(結果約 #D27F02) */
    --nv-accent-active: color-mix(in srgb, var(--nv-accent), var(--bs-black) 12%);
    /* 深橘:白底上的橘色文字、白字用的橘底(對比 4.79:1,--nv-accent 配白字只有 2.42:1) */
    --nv-accent-dark: #A56300;

    /* 整頁背景圖上的壓暗層 */
    --nv-page-overlay: rgba(var(--bs-black-rgb), .2);
    /* 場館分類縮圖上的遮罩:平常、滑鼠移入 */
    --nv-overlay-brand: rgba(var(--bs-primary-rgb), .9);
    --nv-overlay-hover: rgba(var(--bs-secondary-rgb), .65);

    /* ---------- 3. 字型 ---------- */

    /* 字級。內文 1rem 用 --bs-body-font-size */
    --nv-font-size-sm: .875rem;     /* = Bootstrap $font-size-sm */
    --nv-font-size-md: 1.125rem;    /* 18px。與 Bootstrap 的 16px、20px 各差 2px,未併入 */
    --nv-font-size-xl: 1.5rem;      /* = Bootstrap h4 */
    --nv-font-size-display: 2.5rem; /* = Bootstrap h1 */
    /* 隨視窗寬度縮放的頁面主標、副標 */
    --nv-font-size-fluid-title: clamp(1.5rem, 4vw, 2.25rem);
    --nv-font-size-fluid-subtitle: clamp(1rem, 2.4vw, 1.25rem);

    /* 字重。一般 400 用 --bs-body-font-weight */
    --nv-font-weight-bold: 700;     /* = Bootstrap $font-weight-bold */
    --nv-font-weight-black: 900;

    /* 行高。內文 1.5 用 --bs-body-line-height */
    --nv-line-height-condensed: .625;
    --nv-line-height-sm: 1.25;      /* = Bootstrap $line-height-sm */
    --nv-line-height-relaxed: 1.8;

    /* ---------- 4. 間距 ---------- */

    /* 名稱的數字是 px。4、8、16、24 = Bootstrap spacer 1~4 */
    --nv-space-2: .125rem;
    --nv-space-4: .25rem;
    --nv-space-8: .5rem;
    --nv-space-12: .75rem;
    --nv-space-16: 1rem;
    --nv-space-20: 1.25rem;
    --nv-space-24: 1.5rem;
    --nv-space-30: 1.875rem;
    --nv-space-40: 2.5rem;
    --nv-space-80: 5rem;
    --nv-space-90: 5.625rem;

    /* ---------- 5. 尺寸 ---------- */

    /* 頁首與主要內容區的最大寬度 */
    --nv-content-max-width: 950px;

    /* 與行高成對、用來把單行文字垂直置中的高度 */
    --nv-size-chip: 30px;           /* 時段標籤 */
    --nv-size-bar: 40px;            /* 標題列、公告列 */
    --nv-size-row: 50px;            /* 清單表格的列、手機選單的列、大按鈕 */
    --nv-size-member-header: 80px;  /* 會員頁首列 */

    /* 月曆日期格:寬、高、行高都用它,選取底色才會是正圓 */
    --nv-size-calendar-day: 2em;

    /* 載入中圖示的直徑(不含邊框)與邊框粗細 */
    --nv-size-loader: 120px;
    --nv-size-loader-border: 16px;

    /* ---------- 6. 圓角 ---------- */

    /* 4px --bs-border-radius-sm、6px --bs-border-radius、8px --bs-border-radius-lg、
       16px --bs-border-radius-xl、膠囊 --bs-border-radius-pill 都用 Bootstrap 原生變數 */
    --nv-border-radius-2xl: 1.25rem;

    /* ---------- 7. 陰影與 focus ring ---------- */

    /* 小陰影用 --bs-box-shadow-sm */
    --nv-box-shadow-md: 0 .25rem .5rem rgba(var(--bs-black-rgb), .15);

    --nv-text-shadow-nav: 2px 2px 4px var(--bs-secondary);
    --nv-text-shadow-overlay: 0 1px 3px rgba(var(--bs-black-rgb), .6);

    /* focus ring 的粗細用 --bs-focus-ring-width。對話框按鈕壓在遮罩上,不透明度比 Bootstrap 的 .25 高 */
    --nv-focus-ring-strong-opacity: .45;

    /* ---------- 8. z-index ---------- */

    --nv-zindex-loader: 1;
    --nv-zindex-tab-scroll: 10;

    /* ---------- 9. 動態時間 ---------- */

    --nv-duration-fast: .2s;
    --nv-duration-base: .3s;
    --nv-duration-slow: .5s;
    --nv-duration-slower: .8s;
    --nv-duration-spin: 2s;
}

/* ---------- 10. 第三方元件:FileUploader ---------- */

/* RCL 的 FileUploader.css 以 :root 的 --fu-* 表達所有顏色,預設是 Bootstrap 的藍。
   它由各頁的 styles section 載入,排在本檔之後,所以這裡用 :root:root 提高 specificity 才能勝出。
   只覆寫與主題有關的幾個,其餘沿用 RCL 的預設值。 */
:root:root {
    --fu-primary: var(--bs-primary);
    --fu-primary-hover: var(--nv-primary-active);
    /* 半透明陰影用的 rgb 分量,與 --fu-primary 同一個顏色 */
    --fu-primary-rgb: var(--bs-primary-rgb);

    /* 前台沒有獨立的 success 色,成功狀態沿用品牌色 */
    --fu-success: var(--nv-brand);
    --fu-success-hover: var(--bs-primary);

    --fu-danger: var(--bs-danger);

    --fu-muted: var(--bs-secondary);
    --fu-border: var(--bs-border-color);
}