/* ============================================================
 * Design Tokens — 全站共用 CSS variables
 * 用法：base.html 引入後，所有頁面用 var(--token-name)；元件樣式在 ui.css
 *
 * 風格：乾淨商務。白色表面＋帶一點藍的淺灰頁底、單一品牌藍、
 * 深灰藍文字、1px 淡灰邊框、只有兩級陰影（卡片／彈窗）。
 *
 * 灰階採 Radix 式 12 階用法（同一色調，由淺到深）：
 *   1-2 背景｜3-5 元件底（hover / 按下 / 選取）｜6-8 邊框｜9-10 實心｜11-12 文字
 *
 * 深色模式：跟隨系統（prefers-color-scheme），檔尾重新定義色彩 token，
 * 各頁只要用 token 就自動支援；寫死的色碼（#fff、#333…）在深色下會看不清。
 * ============================================================ */

:root {
    color-scheme: light;   /* 原生表單元件、捲軸跟著配色 */

    /* ----- 灰階（帶藍色調） ----- */
    --gray-1:  #fbfcfe;
    --gray-2:  #f5f7fb;
    --gray-3:  #eef1f6;
    --gray-4:  #e7ebf1;
    --gray-5:  #e0e5ec;
    --gray-6:  #d9dfe7;
    --gray-7:  #cbd3de;
    --gray-8:  #b3bdcb;
    --gray-9:  #8a95a5;
    --gray-10: #626d7e;   /* 白底對比 5.2:1，可當次要文字 */
    --gray-11: #4b5565;
    --gray-12: #1b2433;

    /* ----- 主色與品牌 ----- */
    --color-primary:        #1d5fd6;   /* 白底對比 5.7:1 */
    --color-primary-hover:  #174fb5;
    --color-primary-soft:   #eaf1fd;
    --color-primary-ring:   rgba(29, 95, 214, 0.35);
    --color-on-primary:     #ffffff;   /* 主色實心底上的文字 */

    /* ----- 語意色（實心／淡底／淡底上的文字） ----- */
    --color-success:        #1a7f45;
    --color-success-hover:  #146638;
    --color-success-soft:   #e6f4ec;
    --color-success-text:   #145c33;

    --color-warning:        #f59e0b;
    --color-warning-hover:  #d98a06;
    --color-warning-soft:   #fef3d7;
    --color-warning-text:   #8a4b06;
    --color-on-warning:     #1b2433;   /* 警告實心底（亮橘）上的文字，深色模式也不變 */

    --color-danger:         #d1343b;
    --color-danger-hover:   #b42a31;
    --color-danger-soft:    #fdecec;
    --color-danger-text:    #a2242a;

    --color-info:           #0e7490;
    --color-info-hover:     #0b5f76;
    --color-info-soft:      #e0f2f7;
    --color-info-text:      #0b5b70;

    /* ----- 中性色（語意別名，指向灰階） ----- */
    --color-bg:             var(--gray-2);
    --color-surface:        #ffffff;
    --color-surface-alt:    var(--gray-2);
    --color-surface-hover:  var(--gray-3);
    --color-border:         var(--gray-6);
    --color-border-strong:  var(--gray-7);

    --color-text:           var(--gray-12);   /* 主文字 */
    --color-text-muted:     var(--gray-11);   /* 次要文字，白底 7.4:1 */
    --color-text-dim:       var(--gray-10);   /* 輔助說明，白底 5.2:1（仍 ≥ 4.5） */
    --color-scrim:          rgba(16, 24, 40, 0.45);   /* 彈窗背後的半透明遮罩 */

    /* ----- 八種活動類型固定配色（活動頁、工作台共用；用法見 ui.css .type-tag） ----- */
    --t-group: #2a78d6; --t-one: #eb6834; --t-forum: #1baf7a; --t-pres: #eda100; --t-sem: #e87ba4; --t-brief: #008300;
    --t-lunch: #0b6e85; --t-exhib: #4b2a8a;   /* 午餐會議（深青）、帶展（深紫）：一般與紅綠色盲模擬下和其他類型 ΔE ≥ 16 */

    /* ----- 排版 ----- */
    --font-sans: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-num:  "IBM Plex Sans Condensed", "Noto Sans TC", system-ui, sans-serif;   /* 日期、時間、大數字（窄體等寬數字） */

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;

    /* ----- 間距 (8px 規則) ----- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-8: 48px;

    /* ----- 圓角：元件 6px、卡片與彈窗 10px、膠囊 999px ----- */
    --radius:      6px;
    --radius-lg:   10px;
    --radius-pill: 999px;

    /* ----- 陰影：只有卡片與彈窗兩級 ----- */
    --shadow:    0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.16), 0 2px 6px rgba(16, 24, 40, 0.06);

    /* ----- 頁寬：所有頁面的內容區（ui.css .content）共用；寬表格頁用 .content-wide ----- */
    --page-max:      1200px;
    --page-max-wide: 1560px;
    --page-gutter:   24px;

    /* ----- 動效 ----- */
    --ease:            cubic-bezier(0.2, 0, 0, 1);
    --transition-fast: 120ms var(--ease);
    --transition:      180ms var(--ease);

    /* ----- z-index 層級 ----- */
    --z-navbar:   1100;
    --z-dropdown: 1200;
    --z-modal:    1300;
    --z-toast:    1400;
}

/* 手機左右留白縮小 */
@media (max-width: 767.98px) {
    :root { --page-gutter: 16px; }
}

/* ----- 深色模式（跟隨系統）：只改色彩，其餘 token 不變 ----- */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --gray-1:  #0b101b;
        --gray-2:  #0e1320;   /* 頁底 */
        --gray-3:  #1a2233;   /* hover */
        --gray-4:  #212a3b;
        --gray-5:  #283246;
        --gray-6:  #2a3346;   /* 邊框 */
        --gray-7:  #364055;   /* 粗邊框 */
        --gray-8:  #4a5568;
        --gray-9:  #6b7487;
        --gray-10: #8a93a7;   /* 卡片底對比 5.5:1 */
        --gray-11: #b3bbcb;   /* 8.7:1 */
        --gray-12: #e7ebf3;   /* 14:1 */

        --color-primary:        #86a6ff;
        --color-primary-hover:  #b4c7ff;
        --color-primary-soft:   #1d2a52;
        --color-primary-ring:   rgba(134, 166, 255, 0.4);
        --color-on-primary:     #0e1320;

        --color-success-soft:   #12301f;
        --color-success-text:   #6fd39a;
        --color-warning-soft:   #3a2a0a;
        --color-warning-text:   #f2b95a;
        --color-danger-soft:    #3d1719;
        --color-danger-text:    #ff8b84;
        --color-info-soft:      #0c2c36;
        --color-info-text:      #67c7de;

        --color-surface:        #161d2c;
        --color-scrim:          rgba(0, 0, 0, 0.55);

        --t-group: #3987e5; --t-one: #d95926; --t-forum: #199e70; --t-pres: #c98500; --t-sem: #d55181; --t-brief: #008300;
        --t-lunch: #1592b0; --t-exhib: #c4b5fd;   /* 深色底對比 ≥ 4.6；色盲模擬 ΔE ≥ 15 */

        --shadow:    0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
    }
}

/* 使用者在系統設定「減少動態效果」時，全站關掉過場與動畫 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}