/* In-Sign (ISL) design tokens · v1 · 7 Nov 2026
   Source of truth: 07_Admin/Brand/DESIGN_BOOK.md.
   The standard is the live clock-in page (clockin.insign.com.hk) and the A4 site QR poster,
   both approved by Andrew on 7 Nov 2026. Every ISL page and document uses these names.
   Light is the default and the only mode on the staff clock-in page (Andrew 31 Oct 2026:
   "the new design ok, the white go grey a bit"). Dark tokens exist for office pages that opt in. */

:root {
  /* ---- Brand (from the letterhead; never tinted, never used as text on a coloured ground) ---- */
  --isl-red:   #EB3D00;   /* "in-" outline · problems / errors ONLY */
  --isl-green: #009049;   /* "sign" outline · 上班 IN · at site · success */
  --isl-blue:  #0089E1;   /* "limited" · 下班 OUT · step numbers · links */
  --isl-grey:  #747D82;   /* Chinese name, seal, rule line · secondary headings */

  /* ---- Surfaces (light, the default) ---- */
  --bg:    #E9EBED;       /* page: grey-white, cuts sun glare */
  --card:  #F4F5F6;       /* cards, header, inputs */
  --soft:  #E2E5E8;       /* pressed / selected background */
  --line:  #D3D8DB;       /* 1px borders and rules */
  --ink:   #2B3134;       /* body text, titles, dark buttons */
  --muted: #6F777C;       /* captions, English under Chinese, times */

  /* ---- Roles ---- */
  --in:    var(--isl-green);
  --out:   var(--isl-blue);
  --ok:    var(--isl-green);
  --warn:  #A15C00;       /* amber dark enough to read in sun (not the brand red) */
  --info:  #2A5D9F;       /* information navy: site notices, notice board, info pills, job-code tags (Andrew 10 Nov 2026) */
  --info-tint: #EEF3F8;   /* its one tint */
  --info-line: #C3D3E4;   /* its one border */
  --bad:   var(--isl-red);
  --link:  var(--isl-blue);
  --rule:  var(--isl-grey);
  --on-colour: #FFFFFF;   /* text on green / blue / red / ink buttons */
  --disabled: #C6CCD0;    /* disabled big buttons keep white text */

  /* tints for status boxes (page stays light; a tinted card + solid border) */
  --ok-tint:   color-mix(in srgb, var(--isl-green) 12%, var(--card));
  --warn-tint: color-mix(in srgb, var(--warn) 14%, var(--card));
  --bad-tint:  color-mix(in srgb, var(--isl-red) 12%, var(--card));

  /* ---- Type ---- */
  --font: -apple-system, "Segoe UI", Roboto, "Noto Sans HK", "PingFang HK", "Microsoft JhengHei", sans-serif;
  --font-print-zh: "Microsoft JhengHei", "Noto Sans HK", "PingFang HK", sans-serif; /* posters, letters */
  --font-print-en: Arial, Helvetica, sans-serif;
  --fs-caption: 13px;   /* English under Chinese, times, tags */
  --fs-body:    16px;   /* phone body (office pages may use 15px) */
  --fs-title:   18px;   /* card title, dialog title */
  --fs-site:    20px;   /* site name, person name */
  --fs-result:  24px;   /* "✓ 已上班 07:58" */
  --fs-go:      26px;   /* the IN / OUT button */
  --lh: 1.4;

  /* ---- Shape & space ---- */
  --radius:      8px;   /* cards, buttons, inputs */
  --radius-chip: 18px;  /* chips */
  --radius-pill: 999px; /* status pills */
  --radius-box:  10px;  /* status boxes, pop-ups */
  --tap:   44px;        /* minimum tap target */
  --go-h:  76px;        /* IN / OUT button height (glove-friendly) */
  --gutter: 14px;       /* side padding on phone */
  --gap: 8px;
  --maxw: 520px;        /* phone column width */
  --rule-w: 3px;        /* grey rule under the header; status box left bars */

  /* ---- Logo ---- */
  --logo-h: 32px;       /* wordmark height in the phone header */
  --logo-h-min: 24px;   /* never smaller on screen */

  color-scheme: light;
}

/* Dark mode: defined for office pages that opt in with data-theme="dark".
   The staff clock-in page and the guide stay light (sun readability, Andrew 31 Oct). */
:root[data-theme="dark"] {
  --bg:    #1F2426;
  --card:  #2B3134;
  --soft:  #343B3F;
  --line:  #46505A;
  --ink:   #EEF1F3;
  --muted: #AEB6BC;
  --warn:  #E6A23C;
  --disabled: #5A636A;
  --ok-tint:   color-mix(in srgb, var(--isl-green) 22%, var(--card));
  --warn-tint: color-mix(in srgb, var(--warn) 20%, var(--card));
  --bad-tint:  color-mix(in srgb, var(--isl-red) 22%, var(--card));
  color-scheme: dark;
}

/* ---- Base component recipes (copy, do not reinvent) ---- */
.isl-body { margin: 0; background: var(--bg); color: var(--ink); font: var(--fs-body)/var(--lh) var(--font); font-variant-numeric: tabular-nums; }
.isl-header { display: flex; align-items: center; gap: 10px; padding: 7px var(--gutter) 6px; background: var(--card); border-bottom: var(--rule-w) solid var(--rule); }
.isl-header .logo { height: var(--logo-h); display: block; }
.isl-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin: 0 0 10px; }
.isl-go { display: block; width: 100%; min-height: var(--go-h); padding: 18px 14px; border: 0; border-radius: var(--radius); font: 700 var(--fs-go)/1.1 var(--font); color: var(--on-colour); cursor: pointer; }
.isl-go.in { background: var(--in); } .isl-go.out { background: var(--out); } .isl-go:disabled { background: var(--disabled); }
.isl-go small { display: block; font-size: 14px; font-weight: 600; opacity: .85; margin-top: 2px; }
.isl-btn { display: block; width: 100%; min-height: var(--tap); padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); font: 700 15px var(--font); cursor: pointer; }
.isl-btn.primary { background: var(--ink); color: var(--on-colour); border-color: var(--ink); }
.isl-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 6px 11px; border: 1px solid var(--line); border-radius: var(--radius-chip); background: var(--card); color: var(--ink); font: 14px var(--font); }
.isl-chip.on { background: var(--ink); color: var(--on-colour); border-color: var(--ink); }
.isl-pill { font-size: 13px; padding: 2px 8px; border-radius: var(--radius-pill); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.isl-pill.ok { color: var(--ok); border-color: var(--ok); } .isl-pill.wait { color: var(--warn); border-color: var(--warn); } .isl-pill.bad { color: var(--bad); border-color: var(--bad); }
.isl-box { border-radius: var(--radius-box); padding: 9px 11px; margin: 0 0 8px; font-size: 14px; line-height: 1.45; border: 1px solid var(--line); background: var(--card); }
.isl-box.ok { border-color: var(--ok); } .isl-box.warn { background: var(--warn-tint); border-color: var(--warn); } .isl-box.bad { background: var(--bad-tint); border-color: var(--bad); }
.isl-note { border-left: var(--rule-w) solid var(--warn); background: var(--card); padding: 8px 10px; border-radius: 4px; margin: 0 0 10px; font-size: 14px; }
.isl-err  { border-left: var(--rule-w) solid var(--bad);  background: var(--card); padding: 8px 10px; border-radius: 4px; margin: 0 0 10px; font-size: 14px; }
.isl-result { border: 1px solid var(--line); border-radius: var(--radius-box); background: var(--card); padding: 14px 12px; text-align: center; }
.isl-result .big1 { font-size: var(--fs-result); font-weight: 800; }
.isl-result.in .big1 { color: var(--in); } .isl-result.out .big1 { color: var(--out); } .isl-result.bad .big1 { color: var(--bad); }
.isl-kin { color: var(--in); font-weight: 700; } .isl-kout { color: var(--out); font-weight: 700; } .isl-kbad { color: var(--bad); font-weight: 700; } .isl-kwarn { color: var(--warn); font-weight: 700; }
.isl-zh-en { display: block; } .isl-zh-en small { display: block; font-size: var(--fs-caption); color: var(--muted); font-weight: 400; }
.isl-tricolour { height: 6px; background: linear-gradient(90deg, var(--isl-red) 0 33.3%, var(--isl-green) 33.3% 66.6%, var(--isl-blue) 66.6%); } /* print only */
button, .isl-chip { touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .07s, filter .07s; }
button:not(:disabled):active { transform: scale(.97); filter: brightness(.88); }