/* =====================================================================
   遊遊 Twouring Console — 設計代幣（stylebook 的唯一真實來源）
   =====================================================================
   來源是公司 CIS：Background #ffffff / Main #333333 /
   Auxiliary 1 #ff0844 / Auxiliary 2 #ffb199，字體 Nunito + Source Sans。
   官網已把這四色延伸成一組通過 WCAG AA 的階梯，這裡沿用同一組，
   讓後台與官網看起來是同一家公司，而不是各做各的。

   規則：任何顏色、字級、間距、圓角都從這裡取，元件檔不得再寫死色碼。
   ===================================================================== */

/* ---- 字體（自架，不依賴外部 CDN）---- */
/* Nunito 只給品牌標記與頁面標題；密集資料一律 Source Sans，小字才站得住。 */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/nunito-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/nunito-latin-800-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/source-sans-3-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/source-sans-3-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/source-sans-3-latin-700-normal.woff2') format('woff2');
}

:root {
  /* ---- 品牌色（CIS 原色，不可改）---- */
  --cis-bg: #ffffff;          /* Background */
  --cis-main: #333333;        /* Main */
  --cis-aux-1: #ff0844;       /* Auxiliary 1 */
  --cis-aux-2: #ffb199;       /* Auxiliary 2 */

  /* ---- 文字（白底對比度皆達 AA）---- */
  --ink: #24262a;             /* 內文，14.6:1 */
  --ink-strong: #15171a;      /* 標題 */
  --ink-muted: #5b6168;       /* 次要說明，6.3:1 */
  --ink-faint: #6b7178;       /* 表頭、輔助標籤，5.0:1 */
  --ink-invert: #ffffff;

  /* ---- 底色與線 ---- */
  --surface: #ffffff;         /* 卡片、表格 */
  --surface-app: #f7f8f9;     /* 工作區底 */
  --surface-sunken: #eef0f2;  /* 看板欄、輸入區底 */
  --surface-warm: #fff5f1;    /* 品牌暖底（目前選單、提示） */
  --line: #e5e8eb;
  --line-strong: #cfd4d9;     /* 輸入框邊界，需要看得見 */

  /* ---- 強調色（紅是 CIS 的「輔助」色：只用在要動作與要注意的地方）---- */
  --accent: var(--cis-aux-1);    /* 純裝飾／漸層端點，不放白字 */
  --accent-ink: #d80038;         /* 文字與實心按鈕（白字 5.3:1） */
  --accent-deep: #b80030;        /* hover（白字 6.8:1） */
  --accent-soft: #ffe4e9;        /* 標籤底 */
  --accent-2: var(--cis-aux-2);  /* 桃，進度起點 */

  /* ---- 狀態色 ---- */
  --ok-ink: #1a6b3c;
  --ok-soft: #e6f4ec;
  --warn-ink: #8a5200;
  --warn-soft: #fff3df;
  --danger-ink: #a3161c;
  --danger-soft: #fdeaea;

  /* ---- 銷售階梯 ----
     遊遊的營運模型就是一道階梯（名單→資格判斷→報價→議約→成交）。
     開case的四階用桃→紅的漸強表示「越推越熱」，成交與失單刻意跳出這條漸層：
     成交是結果不是熱度，用綠；失單收斂成灰，不該在畫面上尖叫。 */
  --rung-1: #ffc9b4;
  --rung-2: #ff9f8a;
  --rung-3: #ff6f74;
  --rung-4: #ff2f57;
  --rung-won: #1a8a4f;
  --rung-lost: #9aa1a9;
  --meter-fill: linear-gradient(90deg, var(--accent-2) 0%, var(--accent-ink) 100%);

  /* ---- 字體家族 ---- */
  --font-brand: 'Nunito', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif;
  --font-ui: 'Source Sans 3', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif;

  /* ---- 字級（後台密度取向，固定級距不流體：表格要對得齊）---- */
  --fs-xs: 0.75rem;      /* 12 — 標籤、註記 */
  --fs-sm: 0.8125rem;    /* 13 — 表格內容、輔助說明 */
  --fs-base: 0.9375rem;  /* 15 — 內文與所有控制項 */
  --fs-md: 1.0625rem;    /* 17 — 區塊標題 */
  --fs-lg: 1.375rem;     /* 22 — 頁面標題 */
  --fs-xl: 1.75rem;      /* 28 — 數據磚 */
  --fs-2xl: 2.125rem;    /* 34 — 登入頁 */

  --lh-tight: 1.25;
  --lh-base: 1.55;

  /* ---- 間距（4 的倍數）---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ---- 圓角：兩級，對應兩種意義 ---- */
  --radius-control: 8px;   /* 可操作的東西：按鈕、輸入框、標籤 */
  --radius-container: 14px;/* 容器：卡片、磚、對話框 */
  --radius-pill: 999px;

  /* ---- 陰影：只有「浮在內容之上」的東西才有 ---- */
  --shadow-tile: 0 1px 2px rgba(20, 23, 26, 0.04);
  --shadow-float: 0 12px 32px rgba(20, 23, 26, 0.12);
  --ring: 0 0 0 3px rgba(216, 0, 56, 0.45);

  /* ---- 尺寸與動態 ---- */
  --sidebar-w: 224px;
  --content-max: 1480px;
  --tap-min: 44px;          /* 觸控目標下限 */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 150ms;
}