/* Eli's Workshop Time Clock, shared tokens. Palette and faces match the live
   website (elis3dworkshop.com): navy field, gold accent, Libre Baskerville for
   display, Inter for everything else. Both fonts are self-hosted, SIL OFL 1.1. */

@font-face {
  font-family: 'Inter';
  src: url(/fonts/inter-latin.woff2) format('woff2');
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url(/fonts/libre-baskerville-700-latin.woff2) format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --navy-900: #0f1a2c;
  --navy-800: #16233a;
  --navy-700: #1e2a42;
  --navy-600: #2a3754;
  --gold: #d4a84b;
  --gold-l: #e4ac47;
  --gold-p: #edc777;
  --gold-pale: #f4e4b8;
  --ink: #ffffff;
  --ink-2: #dfe6f1;
  --muted: #9fb0c9;
  --line: rgba(212, 168, 75, .24);
  --line-2: rgba(159, 176, 201, .16);
  --ok: #7ee2a8;
  --warn: #f2c46b;
  --stop: #b3434a;
  --stop-l: #cf5a61;
  --serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--navy-900);
  color: var(--ink);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

h1, h2, h3 { margin: 0; font-weight: 700; }

button, input, select, textarea { font: inherit; color: inherit; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.gold { background: var(--gold); color: var(--navy-900); }
.btn.gold:hover { background: var(--gold-p); }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--gold-pale); }
.btn.ghost:hover { border-color: var(--gold); }
.btn.stop { background: var(--stop); color: #fff; }
.btn.stop:hover { background: var(--stop-l); }
.btn.small { min-height: 36px; padding: 0 14px; font-size: 14px; }

.link {
  background: none;
  border: 0;
  padding: 8px 4px;
  color: var(--gold-p);
  font-weight: 600;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.field { display: grid; gap: 6px; }
.field > span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}
.input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--navy-600);
  background: var(--navy-800);
  color: var(--ink);
}
.input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212, 168, 75, .22); }

:focus-visible { outline: 2px solid var(--gold-p); outline-offset: 2px; }

.error { color: #ff9ea3; font-size: 14px; font-weight: 600; min-height: 1.5em; margin: 0; }

.card {
  background: var(--navy-800);
  border: 1px solid var(--line);
  border-radius: 16px;
}