/* 共用介面元件・設定值（票 03）。所有功能 app 的網頁都先載這份，再載 /ui/ui.css。
   樣子：A「紙與玻璃」（cityapp DESIGN.md）＋鋼藍配色（decisions.md 第 39 條；值照 .scratch/function-apps/mockups/src/a.css 的 steel，
   就是 cityapp 給城市工程的那一組）＋B 的手機尺寸（字 17px、清單一列 56px、控制項 48px；第 39 條）。桌機尺寸照 cityapp DESIGN.md。
   用法見 shared/docs/ui.md。
   字型：內容安全政策不准外部網址，先用系統字（數字用 tabular-nums 對齊）；字重只用 400／700（微軟正黑體只有這兩種）。 */

:root {
  color-scheme: light;

  /* 字 */
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  --ui-text: 1.0625rem;     /* 17px：內文、清單、按鈕（字級用 rem，跟著使用者的字級設定放大） */
  --ui-text-sm: 0.9375rem;  /* 15px：副標、說明、欄位標籤 */
  --ui-text-xs: 0.8125rem;  /* 13px：標籤、表頭、時間這類附屬資訊（手機的下限；桌機 12px） */
  --ui-title: 1.25rem;      /* 20px：面板與對話框的標題（卡片標題用內文大小加粗） */
  --ui-h1: 1.75rem;         /* 28px：每頁唯一的大標題 */
  --ui-kpi: 1.875rem;       /* 30px：打卡時間這類大數字 */
  --ui-code: 2.75rem;       /* 44px：要人看著、到別的地方照打的代碼（登入交接的領取碼，oneTimeCode） */
  --ui-leading: 1.5;        /* 單行介面字；長段落用 .ui-prose（1.75） */

  /* 顏色：墨字、紙白、冷白頁底；品牌色（鋼藍）只給可以按的東西，而且面積小（一顆鈕、一格分頁），不整塊塗 */
  --ui-fg: #222831;
  --ui-bg: #F4F5F7;
  --ui-card: #FFFFFF;
  --ui-border: #E1E4E8;
  --ui-border-strong: #CFD4DA;
  --ui-border-input: #858D97;  /* 輸入框、單選圈圈的邊框：對白 3.4:1（看得出框在哪，WCAG 1.4.11） */
  --ui-muted: #EEF0F3;       /* 靜態淡底、選取、打卡卡片的時間格 */
  --ui-hover: #EEF0F3;       /* 滑鼠移上去（跟淡底同值是刻意的：語意分開、值相同） */
  --ui-pressed: #E2E5E9;     /* 按住 */
  --ui-muted-fg: #5C6670;    /* 次要字：對頁底 5.4:1、對白 5.9:1、對淡底 5.1:1 */
  --ui-tint: #DCE6F0;        /* 頭像底 */
  --ui-primary: #28557E;     /* 白字 7.8:1 */
  --ui-primary-hover: #1F4365;
  --ui-primary-active: #17324C;
  --ui-primary-soft: rgba(40, 85, 126, 0.1);
  /* 模組色磚（app 清單左邊的方塊，白圖示）：出勤＝主色、共用資料＝青綠（白圖示 3.9:1） */
  --ui-m-attendance: #28557E;
  --ui-m-shared: #2F8F7E;
  --ui-danger: #B8352A;
  --ui-danger-hover: #9A2C22;
  --ui-danger-active: #7B231B;

  /* 狀態標籤：淡底深字（字對底都在 7:1 上下） */
  --ui-tone-ok-fg: #1F5736;      --ui-tone-ok-bg: #E8F1EC;      --ui-tone-ok-dot: #286F45;
  --ui-tone-warn-fg: #6E4900;    --ui-tone-warn-bg: #F4EFE5;    --ui-tone-warn-dot: #946100;
  --ui-tone-danger-fg: #93291F;  --ui-tone-danger-bg: #F8EBEA;  --ui-tone-danger-dot: #B8352A;
  --ui-tone-info-fg: #214F81;    --ui-tone-info-bg: #EAF0F6;    --ui-tone-info-dot: #2B66A6;
  --ui-tone-plum-fg: #7A2E80;    --ui-tone-plum-bg: #F5ECF5;    --ui-tone-plum-dot: #96449C;
  --ui-tone-neutral-fg: #5C6670; --ui-tone-neutral-bg: #EEF0F3; --ui-tone-neutral-dot: #868E98;

  /* 同心圓角：控制項 10／列 12／卡片 16／對話框 20／底部面板 24／膠囊全圓；編號牌 6 */
  --ui-r-plate: 6px;
  --ui-r-control: 10px;
  --ui-r-row: 12px;
  --ui-r-card: 16px;
  --ui-r-dialog: 20px;
  --ui-r-sheet: 24px;

  /* 深度：卡片的髮絲線在陰影裡（卡片不加 border） */
  --ui-shadow-card: 0 0 0 0.5px rgba(34, 40, 49, 0.07), 0 1px 2px rgba(34, 40, 49, 0.04), 0 10px 24px -18px rgba(34, 40, 49, 0.16);
  --ui-shadow-elevated: 0 6px 20px rgba(34, 40, 49, 0.1), 0 1px 2px rgba(34, 40, 49, 0.06);
  --ui-shadow-modal: 0 24px 64px rgba(34, 40, 49, 0.2), 0 2px 8px rgba(34, 40, 49, 0.08);
  --ui-glass: rgba(255, 255, 255, 0.86);
  --ui-scrim: rgba(34, 40, 49, 0.32);

  /* 尺寸：手機控制項 48、小的 44（手指按得到的下限）、清單一列 56 */
  --ui-ctl: 48px;
  --ui-ctl-sm: 44px;
  --ui-row: 56px;
  --ui-gutter: 16px;
  --ui-safe-top: env(safe-area-inset-top, 0px);
  --ui-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* 動態：按下 100ms、放開 160ms（按下回饋 100～160ms，票 09 的動畫審查）；浮層進 180 出 140；底部面板進 280 出 200 */
  --ui-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ui-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ui-press-down: 100ms;
  --ui-press-up: 160ms;
  --ui-overlay-in: 180ms;
  --ui-overlay-out: 140ms;
  --ui-sheet-in: 280ms;
  --ui-sheet-out: 200ms;
}

/* 桌機：照 cityapp DESIGN.md（內文 14、表單標籤 13、標籤 12、對話框標題 17、頁標題 24、KPI 22、控制項 36／sm 32、清單一列 48） */
@media (min-width: 900px) {
  :root {
    --ui-text: 0.875rem;
    --ui-text-sm: 0.8125rem;
    --ui-text-xs: 0.75rem;
    --ui-title: 1.0625rem;
    --ui-h1: 1.5rem;
    --ui-kpi: 1.375rem;
    --ui-code: 2rem;
    --ui-ctl: 36px;
    --ui-ctl-sm: 32px;
    --ui-row: 48px;
    --ui-gutter: 28px;
  }
}