/* ============================================================
   Staff Attendance — shared design tokens
   Look & feel: access-control terminal. Near-black surface,
   a single scanning teal accent, mono type for anything that
   reads as data (timestamps, ids, confidence).
   ============================================================ */

:root {
  --bg: #0a0d10;
  --surface: #12171c;
  --surface-alt: #1a2128;
  --border: #232b33;
  --text: #eaf0f2;
  --text-muted: #7a8792;
  --accent: #21e6c1;       /* scan / time-in */
  --accent-dim: #14483f;
  --accent-out: #ff7a50;    /* time-out */
  --accent-alert: #ff4d4d;  /* unrecognized / error */

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

::selection { background: var(--accent); color: #04110d; }

/* Scrollbars — keep them quiet on the dark surface */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--surface-alt); border-radius: 6px; border: 2px solid var(--surface); }

.mono { font-family: var(--font-mono); }

button {
  font-family: var(--font-body);
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: border-color .15s ease, transform .1s ease;
}
.btn:hover { border-color: var(--accent); }
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--accent);
  color: #04110d;
  border: 1px solid var(--accent);
  font-weight: 600;
}
.btn-primary:hover { border-color: var(--accent); filter: brightness(1.08); }

.btn-danger {
  background: transparent;
  border: 1px solid var(--accent-alert);
  color: var(--accent-alert);
}

input[type="text"], select {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font-body);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}