/* =========================================================
   czech-theme.css — 全站共用配色（黑底劇院風・紅黑白）
   來源：波希米亞國徽「紅底銀獅」＋捷克雙色印刷（紅＋黑）
   規則：
   - 底色近黑，文字暖白；紅色只用在「可以按的東西」與「目前狀態」
   - 實心紅（--cz-red）當按鈕／作用中頁籤底色，上面一律放白字
   - 紅色文字／連結用 --cz-red-text（在黑底上對比足夠）
   - 不用金色、不用藍色當主色；ok／warn 只當狀態提示
   ========================================================= */
:root{
  color-scheme: dark;

  /* 底與面 */
  --cz-bg:        #141012;  /* 頁面底：劇院黑 */
  --cz-bg-2:      #1b1618;  /* 區塊底（頂欄、側欄） */
  --cz-surface:   #211b1d;  /* 卡片 */
  --cz-surface-2: #2b2326;  /* 卡片 hover／輸入框 */
  --cz-line:      #3a3033;  /* 細分隔線 */
  --cz-line-2:    #4d4044;  /* 較明顯的框線 */

  /* 文字 */
  --cz-text:      #f7f3ee;  /* 主文字：暖白 */
  --cz-text-2:    #cfc6c0;  /* 次文字 */
  --cz-muted:     #9a8f8b;  /* 弱化文字、說明 */

  /* 捷克紅（唯一主色） */
  --cz-red:        #c8102e; /* 實心：主要按鈕、作用中頁籤、徽章（白字對比 5.9:1） */
  --cz-red-hover:  #dc1f3d;
  --cz-red-press:  #a00d25;
  --cz-red-text:   #ff6b75; /* 黑底上的紅字、連結 */
  --cz-red-soft:   #3a1418; /* 淡紅底：標籤、提示框、選取列 */
  --cz-red-line:   rgba(255,107,117,.42); /* 紅色細框 */

  /* 狀態（少量使用） */
  --cz-ok:        #5cc28a;  --cz-ok-soft:   #173326;
  --cz-warn:      #f0b04a;  --cz-warn-soft: #3a2a12;

  /* 形狀 */
  --cz-radius:    12px;
  --cz-radius-sm: 8px;
  --cz-pill:      999px;
  --cz-shadow:    0 14px 40px rgba(0,0,0,.45);
  --cz-focus:     0 0 0 2px var(--cz-bg), 0 0 0 4px var(--cz-red-text);
}

::selection{ background: var(--cz-red); color: #fff; }
:focus-visible{ outline: 2px solid var(--cz-red-text); outline-offset: 2px; }

/* 共用元件（新頁面可直接套用；既有頁面以各自 class 對應同樣規則） */
.cz-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  min-height:44px; padding:0 18px; border-radius:var(--cz-pill); border:1px solid transparent;
  font:inherit; font-weight:600; cursor:pointer; text-decoration:none;
  background:var(--cz-red); color:#fff; transition:background .15s, border-color .15s, transform .1s; }
.cz-btn:hover{ background:var(--cz-red-hover); }
.cz-btn:active{ background:var(--cz-red-press); transform:translateY(1px); }
.cz-btn--ghost{ background:transparent; color:var(--cz-text); border-color:var(--cz-line-2); }
.cz-btn--ghost:hover{ background:var(--cz-surface-2); border-color:var(--cz-red-line); color:var(--cz-text); }
.cz-chip{ display:inline-flex; align-items:center; padding:2px 10px; border-radius:var(--cz-pill);
  background:var(--cz-red-soft); color:var(--cz-red-text); font-size:.82em; font-weight:600; }