/* theme.css — 全站共用設計 token（teal 品牌）。單一來源，各前端頁 <link rel="stylesheet" href="/theme.css">。
   用法：① 用 CSS 變數統一顏色/字體（var(--teal) 取代各頁硬編的藍色）
        ② 需要時直接套 .t-* 元件 class（淺色頁適用）
   深色介面（看板/登入）用 --d-* 變數。改色只改這一支，全站跟著變。 */

:root{
  /* 品牌主色 teal */
  --teal-50:#f0fdfa; --teal-100:#ccfbf1; --teal-500:#14b8a6; --teal-600:#0d9488;
  --teal:#0f766e; --teal-700:#0f766e; --teal-800:#115e59; --teal-900:#134e4a;
  --teal-dark:#0d5c56;
  /* 中性 */
  --ink:#1f2937; --ink-strong:#111827; --muted:#6b7280; --line:#e5e7eb; --bg:#f1f5f9;
  /* 語意色 */
  --success:#10b981; --success-50:#ecfdf5; --success-700:#059669;
  --danger:#ef4444; --danger-50:#fef2f2; --danger-700:#dc2626;
  --warn:#f59e0b;
  --line-green:#06C755;   /* LINE 官方綠，僅 LINE 按鈕用 */
  /* 深色介面（第二螢幕看板、登入卡） */
  --d-bg:#0b1329; --d-panel:#101c33; --d-panel-2:#0e1830; --d-line:#1e2f4d;
  --d-ink:#e8eefc; --d-muted:#8aa2c8;
  /* 形狀 / 陰影 / 字體 */
  --radius:14px; --radius-lg:16px; --radius-sm:10px;
  --shadow-sm:0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 8px 24px rgba(15,23,42,.12);
  --font:"Noto Sans TC", -apple-system, BlinkMacSystemFont, "Microsoft JhengHei", sans-serif;
}

/* ── 共用元件（淺色頁可直接套；不強制，用不到不影響既有 class）── */
.t-font{ font-family:var(--font); }

.t-card{ background:#fff; border-radius:var(--radius-lg); padding:18px;
  box-shadow:var(--shadow-sm); }

.t-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border:none; border-radius:var(--radius); font-size:15px; font-weight:700;
  cursor:pointer; font-family:var(--font); transition:transform .05s, background .15s, opacity .15s; }
.t-btn:active{ transform:scale(.98); }
.t-btn:disabled{ opacity:.55; cursor:not-allowed; }
.t-btn--primary{ background:var(--teal); color:#fff; box-shadow:0 2px 8px rgba(15,118,110,.25); }
.t-btn--primary:hover{ background:var(--teal-dark); }
.t-btn--success{ background:var(--success); color:#fff; }
.t-btn--ghost{ background:#fff; color:var(--teal); border:1.5px solid var(--line); }
.t-btn--line{ background:var(--line-green); color:#fff; }

.t-input{ width:100%; padding:13px 14px; border:1px solid #d1d5db; border-radius:12px;
  font-size:16px; background:#fff; color:var(--ink); font-family:var(--font); }
.t-input:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(15,118,110,.12); }

.t-chip{ display:inline-block; padding:9px 16px; border-radius:999px; border:1px solid var(--line);
  background:#fff; color:var(--muted); font-size:14px; font-weight:600; cursor:pointer; }
.t-chip.is-on{ border-color:var(--teal); background:var(--teal); color:#fff; }

.t-badge{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700;
  background:var(--teal-50); color:var(--teal-dark); border:1px solid var(--teal-100); }

.t-error{ background:var(--danger-50); border:1px solid #fca5a5; border-left:4px solid var(--danger);
  padding:12px 14px; border-radius:var(--radius-sm); color:var(--danger-700); font-size:14px; font-weight:500; }