/* TimeLog IQ — shared design tokens + self-hosted Inter (v1.2.9 overhaul)
   Keyed to DESIGN-SPEC.md §1. Self-hosted Inter (Latin subset, variable) for OCAP —
   no Google Fonts CDN. Linked first in each entry <head>; each file's own inline
   <style> may still override where a surface isn't being restyled yet. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;            /* variable weight axis */
  font-display: swap;             /* native font renders instantly, swaps when cached */
  src: url("/assets/fonts/inter-var-latin.woff2") format("woff2");
}

:root {
  /* core (measured from mockups) */
  --primary:      #0766f4;
  --primary-700:  #0556d0;
  --primary-050:  #e9f1fe;
  --ink:          #1b2644;
  --text:         #243049;
  --muted:        #64748b;
  --dim:          #94a3b8;
  --app-bg:       #f7f8fb;
  --surface:      #ffffff;
  --surface-2:    #f1f5f9;
  --line:         #e7ebf2;

  /* semantic accents — text / bg pairs (harmonized with existing chips) */
  --c-green:  #16a34a;  --c-green-bg:  #dcfce7;
  --c-amber:  #d97706;  --c-amber-bg:  #fef3c7;
  --c-red:    #dc2626;  --c-red-bg:    #fee2e2;
  --c-blue:   #2563eb;  --c-blue-bg:   #dbeafe;
  --c-purple: #7c3aed;  --c-purple-bg: #efeafe;
  --c-teal:   #0d9488;  --c-teal-bg:   #ccfbf1;
  --c-orange: #ea580c;  --c-orange-bg: #ffedd5;
  --c-slate:  #475569;  --c-slate-bg:  #f1f5f9;

  /* radius / shadow */
  --r-card: 16px; --r-tile: 12px; --r-control: 10px; --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-pop:  0 8px 24px rgba(16,24,40,.12);
}

/* Canonical status-pill helper (DESIGN-SPEC §4) — one source of truth so chips
   read identically on kiosk / portal / admin / reports. */
.tiq-pill { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
  line-height:1; padding:5px 10px; border-radius:var(--r-pill); white-space:nowrap; }
.tiq-pill[data-s="clocked-in"]      { color:var(--c-green);  background:var(--c-green-bg); }
.tiq-pill[data-s="clocked-out"]     { color:var(--c-slate);  background:var(--c-slate-bg); }
.tiq-pill[data-s="out-for-work"]    { color:var(--c-blue);   background:var(--c-blue-bg); }
.tiq-pill[data-s="out-for-errand"]  { color:var(--c-teal);   background:var(--c-teal-bg); }
.tiq-pill[data-s="on-break"]        { color:var(--c-orange); background:var(--c-orange-bg); }
.tiq-pill[data-s="late"]            { color:var(--c-amber);  background:var(--c-amber-bg); }
.tiq-pill[data-s="absent"]          { color:var(--c-red);    background:var(--c-red-bg); }
.tiq-pill[data-s="missed"]          { color:var(--c-red);    background:var(--c-red-bg); }
.tiq-pill[data-s="pending"]         { color:var(--c-amber);  background:var(--c-amber-bg); }

/* Mobile hard rule: inputs ≥16px so iOS Safari never auto-zooms on focus (DESIGN-SPEC §2.5). */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}
