/*
 * theme.css — Turnstile's design-system values.
 *
 * Swiss front-desk console: hairline grid, square corners, no shadows, small
 * caps on labels, mono numerals for anything counted. One signal-red accent
 * (#e8402c) for the thing that needs acting on now; everything else is ink,
 * paper and hairline grey.
 */

:root {
  --canvas: #fafaf8;
  --surface: #fdfdfc;
  --surface-2: #f1f0ea;
  --border: #dedcd3;
  --border-strong: #b9b6a9;
  --ink: #14151a;
  --muted: #67686a;
  --accent: #d6371f;
  --accent-hover: #b52d16;
  --accent-ink: #ffffff;
  --accent-text: #c43625;
  --accent-strong: #b43222;
  --accent-soft: #f8e2dd;
  --accent-border: #eab6ab;
  --success: #16653f;
  --success-ink: #ffffff;
  --success-soft: #e2ece4;
  --success-strong: #16653f;
  --warning: #9a5b0a;
  --warning-ink: #ffffff;
  --warning-soft: #f2e6d6;
  --warning-strong: #8a4f08;
  --danger: #b43222;
  --danger-ink: #ffffff;
  --danger-soft: #f4ddd8;
  --danger-strong: #9c2b1d;
  --chart-1: #e8402c;
  --chart-2: #14151a;
  --chart-3: #9a5b0a;
  --chart-4: #4c5b6b;
  --chart-5: #67684f;
  --chart-6: #3d6b6a;

  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 0px;
  --radius-card: 0px;
  --radius-input: 0px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-raised: 0 0 0 1px var(--border);
  --shadow-btn: none;
  --card-pad: 1.25rem;
  --caps: uppercase;
  --caps-tracking: 0.07em;
  --btn-weight: 600;
  --measure: 62ch;
}

html[data-theme="dark"] {
  --canvas: #131319;
  --surface: #1a1a21;
  --surface-2: #212129;
  --border: #33333d;
  --border-strong: #4c4c57;
  --ink: #f5f4ef;
  --muted: #9d9da3;
  --accent: #ff5a3e;
  --accent-hover: #ff7357;
  --accent-ink: #14151a;
  --accent-text: #ff7357;
  --accent-strong: #ff8a70;
  --accent-soft: #3a1c15;
  --accent-border: #5c2c22;
  --success: #4bab7d;
  --success-ink: #0e1a14;
  --success-soft: #16281f;
  --success-strong: #6fc296;
  --warning: #d99a4e;
  --warning-ink: #1f1206;
  --warning-soft: #2c2013;
  --warning-strong: #e5b06c;
  --danger: #ff6b52;
  --danger-ink: #1f0e0a;
  --danger-soft: #331711;
  --danger-strong: #ff8a70;
  --chart-1: #ff5a3e;
  --chart-2: #f5f4ef;
  --chart-3: #d99a4e;
  --chart-4: #8ea3b8;
  --chart-5: #a7a885;
  --chart-6: #6fb3b0;
}

/*
 * app.css — Turnstile's own rules: the hero-only entrance (the check-in
 * keypad on the front-desk console, the dark statement band on the trainer
 * roster, the sign-in card) and nothing else moves.
 */

[data-inview] {
  opacity: 1;
  transform: none;
}
[data-inview].is-inview {
  animation: turnstile-rise 640ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
}
@keyframes turnstile-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
html.reduced-motion [data-inview].is-inview {
  animation: none;
}

/* The keypad display: a hairline field with generous mono tracking so a
   half-entered number still reads like a phone number, not a typo. */
#phone-display {
  letter-spacing: 0.18em;
}
#phone-display::placeholder {
  letter-spacing: normal;
}

/* Keypad buttons keep a fixed square-ish footprint at every width, never
   wrapping onto an uneven last row. */
#keypad .btn {
  font-variant-numeric: tabular-nums;
}