/* ===== 全站風格設定（唯一的地方）=====
   顏色、字體、字級、間距、圓角全部在這裡定義成 CSS 變數；style.css、dashboard.css 只引用變數。
   要整體換風格，只改這個檔。
   目前風格：A「官網延伸」（brand/theme-A.css）。白底留白、標題與 KPI 數字用明朝體、卡片幾乎直角，
   logo 金只用在 logo、細線、分頁底線、標題前的短直線。
   tests/test_theme.py 會檢查：其他檔案沒有寫死風格數值、文字對比 ≥ 4.5、金色沒有被當成文字色。 */
:root{
  /* --- 品牌 --- */
  --brand-gold:#CDB740;    /* logo 金：只能當線條、色塊，不可當文字或數字色（對白底只有 2:1） */
  --brand-ink:#26282B;     /* logo 炭灰 */
  --rule:var(--brand-gold);        /* 標題下的細線 */
  --tab-active:var(--brand-gold);  /* 目前分頁的底線 */
  --eyebrow:#76650F;       /* 英文小標「SALES DASHBOARD」：加深的金色，可當文字 */

  /* --- 顏色（淺色）--- */
  --bg:#F5F5F3;            /* 頁面底色 */
  --surface:#FFFFFF;       /* 卡片、表格底色 */
  --line:#E4E3DF;          /* 框線、分隔線 */
  --th-bg:#FAFAF8;         /* 表頭底色 */
  --fg:#26282B;            /* 主要文字 */
  --muted:#62656B;         /* 次要文字 */
  --kpi-fg:#26282B;        /* KPI 數字 */
  --link:#4A5A6A;          /* 連結 */
  --accent:#4A5A6A;        /* 主色（達標、按鈕、圖表長條） */
  --accent-soft:#ECEEF0;   /* 主色淺底 */
  --on-accent:#FFFFFF;     /* 主色上的文字、銷控表簽約● */
  --track:#EBEAE6;         /* 進度條底 */
  --good:#2E7552; --good-soft:#E3F0E8; --good-ink:#225C3E;   /* -ink：淺底上的文字 */
  --warn:#9A6510; --warn-soft:#F5ECDA; --warn-ink:#7A4E0B;   /* 未達標、警告 */
  --bad:#B03A3A;  --bad-soft:#F6E3E3;                        /* 錯誤、負值 */
  /* 頁首 */
  --topbar-bg:#FFFFFF; --topbar-fg:#26282B; --topbar-muted:#62656B; --topbar-rule:1px solid #E4E3DF;
  --logo-cut:#FFFFFF;      /* logo 六芒星鏤空線的顏色＝頁首底色（PNG 鏤空是透明的，會自動透出頁首底色） */
  /* 永遠是白底的區塊：週報原圖、放大框、QR code（掃描需要黑白） */
  --paper:#FFFFFF; --paper-fg:#26282B; --paper-line:#E4E3DF; --qr-dark:#000000;
  --backdrop:rgba(0,0,0,.6);
  color-scheme:light;

  /* --- 字體（不載入外部字體，用裝置內建）--- */
  --f-display:"Noto Serif TC","Songti TC","PMingLiU",serif;   /* 標題、KPI 數字用明朝體 */
  --f-body:"PingFang TC","Microsoft JhengHei","Noto Sans TC",system-ui,sans-serif;
  --f-num:"SF Mono",ui-monospace,Menlo,Consolas,monospace;   /* 表格數字（等寬） */
  --f-latin:"Avenir Next","Segoe UI",system-ui,sans-serif;   /* 英文小標（全大寫、字距加寬） */
  --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --fw-display:600;        /* 明朝體標題、KPI 數字 */

  /* --- 字級 --- */
  --fs-2xs:11px;           /* 銷控表格子、圖上小字 */
  --fs-grid:11.5px;        /* 銷控表 */
  --fs-xs:12px;
  --fs-caption:12.5px;     /* 表頭、圖例、說明 */
  --fs-sm:13px;
  --fs-table:13.5px;       /* 個案頁小表格 */
  --fs-md:14px;
  --fs-base:15px;          /* 內文 */
  --fs-ui:16px;            /* 登入、管理頁內文（手機輸入框 16px 才不會被放大） */
  --fs-lg:18px;
  --fs-h2:19px;
  --fs-big:20px;           /* 臨時密碼 */
  --fs-kpi:28px;
  --fs-h1:clamp(24px,3.4vw,32px);
  --fs-case-title:clamp(22px,3vw,28px);

  /* --- 間距（由小到大）--- */
  --space-1:1px;
  --space-2:2px;
  --space-3:4px;
  --space-4:5px;
  --space-5:6px;
  --space-6:7px;
  --space-7:8px;
  --space-8:10px;
  --space-9:12px;
  --space-10:14px;
  --space-11:16px;
  --space-12:18px;
  --space-13:20px;
  --space-14:22px;
  --space-15:24px;
  --space-16:28px;
  --space-17:48px;
  --pad-page:36px;         /* 儀表板頁面上方留白 */

  /* --- 圓角 --- */
  --radius-xs:2px;         /* 圖例小方塊、圖表長條 */
  --radius-sm:3px;         /* 銷控表格子 */
  --radius-md:4px;         /* 進度條、小輸入框 */
  --radius:2px;            /* 卡片、表格、面板、表單：幾乎直角 */
  --radius-lg:2px;         /* 放大框 */
  --radius-pill:999px;     /* 標籤、個案按鈕 */
  --radius-round:50%;

  /* --- 線條與版面尺寸 --- */
  --rule-w:2px;            /* 標題下的金色細線 */
  --h2-mark-w:3px;         /* 區塊標題前的金色短直線 */
  --tab-w:3px;             /* 目前分頁底線 */
  --logo-h:30px;           /* 頁首 logo */
  --page-max:1180px;
  --form-max:26rem;
  --tap-min:40px;          /* 可點的最小高度 */
  --trend-h-narrow:240px;  /* 手機上走勢圖的高度（可左右滑動） */
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#161719; --surface:#1E1F22; --line:#33353A; --th-bg:#232428;
  --fg:#ECEAE4; --muted:#A4A39D; --kpi-fg:#ECEAE4; --link:#B9C8D6;
  --accent:#9DB0C3; --accent-soft:#262C33; --on-accent:#161719; --track:#2C2E33;
  --good:#7CC49A; --good-soft:#1D3027; --good-ink:var(--good);
  --warn:#E2B15A; --warn-soft:#3A3020; --warn-ink:var(--warn);
  --bad:#E58A8A; --bad-soft:#3D2424;
  --eyebrow:#D9C561;
  --topbar-bg:#1E1F22; --topbar-fg:#ECEAE4; --topbar-muted:#A4A39D; --topbar-rule:1px solid #33353A;
  --logo-cut:#1E1F22;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#161719; --surface:#1E1F22; --line:#33353A; --th-bg:#232428;
  --fg:#ECEAE4; --muted:#A4A39D; --kpi-fg:#ECEAE4; --link:#B9C8D6;
  --accent:#9DB0C3; --accent-soft:#262C33; --on-accent:#161719; --track:#2C2E33;
  --good:#7CC49A; --good-soft:#1D3027; --good-ink:var(--good);
  --warn:#E2B15A; --warn-soft:#3A3020; --warn-ink:var(--warn);
  --bad:#E58A8A; --bad-soft:#3D2424;
  --eyebrow:#D9C561;
  --topbar-bg:#1E1F22; --topbar-fg:#ECEAE4; --topbar-muted:#A4A39D; --topbar-rule:1px solid #33353A;
  --logo-cut:#1E1F22;
  color-scheme:dark}