/* 官網的站台代幣：顏色、字型、字級在這裡定一次，接到 Bootstrap 的變數上；版面一律用 Bootstrap 的 class。
   字型與字級都照 Vaeron One 的 Layout.css：同一組字型，字級同樣四階、同樣的值。
   這一支另外只放 Bootstrap 沒有的：語言切換、圖示跟著字級。動態一律用影片或逐格計算，不用 CSS 動畫。 */

:root {
    --ink: #1b1b1a;
    --ink-hover: #343432;
    --paper: #f6f6f4;
    --surface: #ffffff;
    --accent: #2b4ecc;
    --live: #2f7d4f;
    --line: rgba(27, 27, 26, .12);

    --font: 'IBM Plex Sans', 'Noto Sans TC', Helvetica, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, monospace;

    /* 字級四階：大標、標題、內文、說明（與 Vaeron One 相同）。 */
    --text-display: 20px;
    --text-heading: 17px;
    --text-body: 11px;
    --text-caption: 11px;

    --bs-body-font-family: var(--font);
    --bs-body-font-size: var(--text-body);
    --bs-body-line-height: 1.6;
    --bs-font-monospace: var(--mono);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--paper);
    --bs-emphasis-color: var(--ink);
    --bs-border-color: var(--line);
    --bs-primary: var(--accent);
    --bs-primary-rgb: 43, 78, 204;
    --bs-primary-bg-subtle: #e4e9fa;
    --bs-primary-text-emphasis: #1f3a99;
    --bs-dark: var(--ink);
    --bs-dark-rgb: 27, 27, 26;
    --bs-success: var(--live);
    --bs-success-rgb: 47, 125, 79;
    --bs-link-color: var(--ink);
    --bs-link-color-rgb: 27, 27, 26;
    --bs-link-hover-color: var(--accent);
    --bs-link-hover-color-rgb: 43, 78, 204;
}

body { letter-spacing: -0.01em; }

/* 標題照四階，不用 Bootstrap 自帶的 rem；按鈕與內文同一級（與 Vaeron One 相同）。 */
h1, h2, .fs-display { font-size: var(--text-display); line-height: 1.25; }
h3, .fs-heading { font-size: var(--text-heading); line-height: 1.4; }
.small, small, .badge { font-size: var(--text-caption); }
.btn { font-size: var(--text-body); }

/* 表單：欄位與內文同一級、說明與錯誤用說明那一級；欄位底色是卡片的白，焦點環換成站台的藍（Bootstrap 寫死的是它自己的藍）。 */
.form-control, .form-select { --bs-body-bg: var(--surface); font-size: var(--text-body); }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 .25rem rgba(43, 78, 204, .25); }
.form-text, .invalid-feedback { font-size: var(--text-caption); }

.card { --bs-card-bg: var(--surface); }

.btn-dark {
    --bs-btn-bg: var(--ink);
    --bs-btn-border-color: var(--ink);
    --bs-btn-hover-bg: var(--ink-hover);
    --bs-btn-hover-border-color: var(--ink-hover);
    --bs-btn-active-bg: var(--ink-hover);
}

/* 語言：根元素的 data-lang 決定哪一種字畫出來。英文畫 data-en；其他四種畫 data-zh（簡中、馬來文、印尼文由 Lang.js 換字）。 */
html:not([data-lang="en"]) [data-en],
html[data-lang="en"] [data-zh] { display: none !important; }

/* 圖示跟著字級走。 */
svg.lucide { width: 1.15em; height: 1.15em; flex: none; }