/* ==========================================================================
   基隆市政府公有場地線上租借整合平台 — 設計代幣
   色彩依「前台配色指引」定義，數值不得任意調整。

   與雛形（投標資料/操作說明雛形/assets/css/tokens.css）的差異：
   本專案仍載入 Bootstrap 4（frontref/css/all.css）供尚未換版的頁面使用，
   因此元素重置一律收斂在 .s2 作用域內，避免影響舊頁。
   ========================================================================== */

:root {
  /* ---- 政府識別藍 ---- */
  --blue-dark: #2f6fa9;
  --blue: #4d8cc4;
  --blue-light: #eaf3fa;
  --blue-outline: #4d8cff;

  /* ---- 平台品牌紫 ---- */
  --purple-dark: #54378a;
  --purple: #6846a5;
  --purple-light: #eee9f7;
  --purple-xlight: #f7f4fb;
  --purple-section: #f2eef8;

  /* ---- 服務綠 ---- */
  --green-dark: #438c52;
  --green: #62a96b;
  --green-light: #eaf5ec;
  --green-border: #8bc493;
  --line-green: #31c34a;

  /* ---- 中性 ---- */
  --text: #222222;
  --text-2: #5f6368;
  --text-muted: #8a8f98;
  --border: #d9dde3;
  --border-card: #e2e5ea;
  --rule: #b7bbc2;
  --bg: #f4f6f8;
  --white: #ffffff;
  --footer: #444444;
  --footer-text-2: #d6d6d6;
  --footer-link-hover: #bfa8e3;

  /* ---- 狀態 ---- */
  --success: #2e8b57;
  --success-bg: #e9f6ee;
  --warning: #c98a18;
  --warning-bg: #fff6dd;
  --danger: #c94a4a;
  --danger-bg: #fcecec;
  --info: #3478b9;
  --info-bg: #eaf3fb;

  /* ---- 內頁沿用的別名 ----
     雛形內頁（front.css）以 --ink / --mist / --line-card 命名同一組色，
     這裡指回上面的代幣，讓兩份樣式表共用單一色彩來源。 */
  --ink: var(--text);
  --ink-soft: var(--text-2);
  --ink-mute: var(--text-muted);
  --line: var(--border);
  --line-card: var(--border-card);
  --mist: var(--bg);
  --ok: var(--success);
  --warn: var(--warning);
  --warn-bg: var(--warning-bg);
  --warn-border: #ebd79f;
  --danger-border: #efc9c9;

  /* ---- 字體 ----
     中文用 Noto Sans TC；數字與拉丁字母用 IBM Plex Sans 的等寬數字，
     讓費用、人數、坪數、日期在卡片與清單間對得齊。 */
  --font-zh: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
  --font-num: "IBM Plex Sans", "Noto Sans TC", "PingFang TC", sans-serif;
  --font: var(--font-zh);

  /* ---- 版面 ----
     設計稿以 1600px 寬繪製。--u 是「設計稿 1px」的實際長度：
     視窗 1600px 時等於 1px（與設計稿等尺寸），窗寬變動時整頁等比縮放，
     所以下面所有尺寸都直接寫設計稿量到的數值 × --u。 */
  --font-scale: 1;
  --u: calc(clamp(0.7px, 0.0625vw, 1.06px) * var(--font-scale));
  --wrap: calc(1404 * var(--u));
  --gutter: 32px;
  --radius: 8px;
  --radius-lg: 16px;
  --sidebar-w: calc(438 * var(--u));

  /* ---- 陰影 ---- */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.1);
  --shadow-pop: 0 6px 20px rgba(84, 55, 138, 0.18);

  /* ---- 動態 ---- */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur: 260ms;
}

/* ---- 重置（限 .s2 作用域） ---- */
.s2,
.s2 *,
.s2 *::before,
.s2 *::after {
  box-sizing: border-box;
}

/* 相當於雛形的 body 樣式：字體與行高由作用域根往下繼承 */
.s2 {
  font-family: var(--font-zh);
  font-size: calc(17 * var(--u));
  line-height: 1.7;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.s2 h1,
.s2 h2,
.s2 h3,
.s2 h4,
.s2 p,
.s2 figure,
.s2 dl,
.s2 dd,
.s2 dt {
  margin: 0;
}

.s2 ul,
.s2 ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.s2 img {
  display: block;
  max-width: 100%;
}

.s2 button,
.s2 input,
.s2 select,
.s2 textarea {
  font: inherit;
  color: inherit;
}

.s2 a {
  color: inherit;
  text-decoration: none;
}

/* Bootstrap 4 會在 table 上加底線色與間距，內頁表格自行控制 */
.s2 table {
  border-collapse: collapse;
}

/* 數字一律等寬對齊 */
.s2 .num,
.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ---- 無障礙基礎 ---- */
.s2 :focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 20px;
  background: var(--purple);
  color: var(--white);
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top 160ms var(--ease);
}

.skip-link:focus {
  top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .s2 *,
  .s2 *::before,
  .s2 *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}