/* ─────────────────────────────────────────────────────────────────────────
   theme.css — fonts + design tokens for the three themes.
   Components (app.css) only ever use these variables, never raw colours,
   so a theme is just this block. Theme is chosen per user (account menu).
   Fonts are served from /static/fonts (works without internet). Latin only;
   Chinese text falls back to the system CJK font.
   ───────────────────────────────────────────────────────────────────────── */

@font-face{font-family:'Zen Kaku Gothic New';font-weight:400;font-display:swap;src:url(../fonts/zen-kaku-gothic-new-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Zen Kaku Gothic New';font-weight:500;font-display:swap;src:url(../fonts/zen-kaku-gothic-new-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Zen Kaku Gothic New';font-weight:700;font-display:swap;src:url(../fonts/zen-kaku-gothic-new-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:400;font-display:swap;src:url(../fonts/archivo-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:500;font-display:swap;src:url(../fonts/archivo-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:700;font-display:swap;src:url(../fonts/archivo-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-weight:800;font-display:swap;src:url(../fonts/archivo-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Geist';font-weight:400;font-display:swap;src:url(../fonts/geist-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Geist';font-weight:500;font-display:swap;src:url(../fonts/geist-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Geist';font-weight:600;font-display:swap;src:url(../fonts/geist-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-weight:400;font-display:swap;src:url(../fonts/geist-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-weight:500;font-display:swap;src:url(../fonts/geist-mono-latin-500-normal.woff2) format('woff2')}

:root{
  --cjk:"Microsoft JhengHei","Microsoft YaHei","PingFang TC","Noto Sans CJK TC","Noto Sans TC";
  /* type scale (same in every theme) */
  --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-lg:15px; --fs-xl:20px; --fs-2xl:28px;
  --space:8px;
}

/* ── A · MUJI (default) ───────────────────────────────────────────────── */
:root, [data-theme="muji"]{
  --font-sans:'Zen Kaku Gothic New',var(--cjk),system-ui,sans-serif;
  --font-num:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --bg:#F3F1EC; --surface:#FBFAF7; --surface2:#EEEBE4; --surface3:#E6E2D9;
  --border:#DCD7CC; --border-strong:#2B2A27;
  --text:#2B2A27; --muted:#6B665D; --muted2:#4F4B44;
  --input-bg:#FBFAF7; --input-border:#CFC9BD;
  --table-head:#EEEBE4; --table-hover:#F0EDE6;
  --shadow:0 10px 30px rgba(43,42,39,.12); --overlay:rgba(43,42,39,.38);
  --accent:#2B2A27; --accent-fg:#F7F5F0; --focus:#7F0019;

  /* status: only exceptions get colour */
  --red:#9B2C1F;    --red-bg:#F6E5E1;    --red-bd:#9B2C1F;     /* absent */
  --orange:#8A5A0E; --orange-bg:#F5EAD6; --orange-bd:#B07A22;  /* late */
  --green:#4E6B45;  --green-bg:#E8EDE3;  --green-bd:#B9C7B0;
  --blue:#3E5A78;   --blue-bg:#E4E9F0;   --blue-bd:#A7B8CE;
  --teal:#2B6E70;   --teal-bg:#DCEDEC;   --teal-bd:#93C3C2;    /* leave */
  --yellow:#76620F; --yellow-bg:#F2EDD8; --yellow-bd:#D3C58C;  /* holiday */
  --guard:#5E4B73;  --guard-bg:#EBE6F0;  --guard-bd:#C5BAD2;
  --dot-ontime:#6D7F5E; --dot-out:#A39E94; --dot-pending:#C2BCB0;

  --r:4px; --r-sm:3px; --bw:1px; --alert-bw:2px;
  --header-rule:1px solid var(--border);
  --icon-sw:1.6;
  --stat-fs:34px; --stat-fw:400;
  --label-tt:none; --label-ls:0; --label-fw:400;
  --h-fw:500;
}

/* ── B · Swiss ────────────────────────────────────────────────────────── */
[data-theme="swiss"]{
  --font-sans:'Archivo',var(--cjk),'Helvetica Neue',Arial,sans-serif;
  --font-num:'Archivo',var(--cjk),'Helvetica Neue',Arial,sans-serif;
  --bg:#FFFFFF; --surface:#FFFFFF; --surface2:#F2F2F2; --surface3:#E4E4E4;
  --border:#D4D4D4; --border-strong:#111111;
  --text:#111111; --muted:#5C5C5C; --muted2:#333333;
  --input-bg:#FFFFFF; --input-border:#111111;
  --table-head:#FFFFFF; --table-hover:#F4F4F4;
  --shadow:0 0 0 2px #111111; --overlay:rgba(0,0,0,.45);
  --accent:#111111; --accent-fg:#FFFFFF; --focus:#D0000E;

  --red:#C8000D;    --red-bg:#FFECEC;    --red-bd:#D0000E;
  --orange:#A34F00; --orange-bg:#FFF1E2; --orange-bd:#D86A00;
  --green:#111111;  --green-bg:#F2F2F2;  --green-bd:#111111;
  --blue:#2F5DA8;   --blue-bg:#EEF2FA;   --blue-bd:#2F5DA8;
  --teal:#00777A;   --teal-bg:#E5F3F3;   --teal-bd:#00777A;
  --yellow:#7A6000; --yellow-bg:#FBF6E0; --yellow-bd:#B39200;
  --guard:#5B3E8C;  --guard-bg:#F2EEF8;  --guard-bd:#5B3E8C;
  --dot-ontime:#111111; --dot-out:#9A9A9A; --dot-pending:#C9C9C9;

  --r:0px; --r-sm:0px; --bw:2px; --alert-bw:3px;
  --header-rule:4px solid #111111;
  --icon-sw:2;
  --stat-fs:56px; --stat-fw:800;
  --label-tt:uppercase; --label-ls:.08em; --label-fw:700;
  --h-fw:800;
}

/* ── C · Dark ─────────────────────────────────────────────────────────── */
[data-theme="dark"]{
  --font-sans:'Geist',var(--cjk),system-ui,sans-serif;
  --font-num:'Geist Mono',ui-monospace,Consolas,monospace;
  --bg:#0D0E10; --surface:#15171A; --surface2:#1B1E22; --surface3:#24282E;
  --border:#262A30; --border-strong:#3A4048;
  --text:#E9E7E2; --muted:#9097A1; --muted2:#C3C8CF;
  --input-bg:#111316; --input-border:#2E3339;
  --table-head:#15171A; --table-hover:#1B1E22;
  --shadow:0 14px 36px rgba(0,0,0,.55); --overlay:rgba(0,0,0,.62);
  --accent:#E9E7E2; --accent-fg:#0D0E10; --focus:#9BB0D6;

  --red:#F2806F;    --red-bg:#24130F;    --red-bd:#E0604F;
  --orange:#E3B25E; --orange-bg:#221A0C; --orange-bd:#D09A3A;
  --green:#8FBF8F;  --green-bg:#122016;  --green-bd:#2B4A31;
  --blue:#8FA9D6;   --blue-bg:#121A28;   --blue-bd:#2C3D5C;
  --teal:#7FC2CC;   --teal-bg:#0F2124;   --teal-bd:#25474D;
  --yellow:#E0C66A; --yellow-bg:#211D0D; --yellow-bd:#4D4319;
  --guard:#B9A2E0;  --guard-bg:#1B1527;  --guard-bd:#3D3157;
  --dot-ontime:#8FBF8F; --dot-out:#5C636C; --dot-pending:#3E444C;

  --r:10px; --r-sm:7px; --bw:1px; --alert-bw:2px;
  --header-rule:1px solid var(--border);
  --icon-sw:1.6;
  --stat-fs:30px; --stat-fw:500;
  --label-tt:none; --label-ls:0; --label-fw:400;
  --h-fw:600;
}