/*
  Subject list:
  1. Event attendee registration and verification desk
  2. Badge issuance, registration checks, and attendee pass documentation
  3. Clean slate palette: deep navy slate, crisply tinted eggshell ground, cobalt highlight
  4. Precise technical grid, typographic clarity, tabular check logs
  5. Minimal layout with direct interactive forms and status receipts
  6. Rapid self-service check-in console

  Design idea:
  On this site, the event reception check-in log becomes a tactile, unified console
  with live credential verification, attendance checks, and attendee document upload.
*/

:root {
  --color-ground: #f4f6f8;
  --color-surface: #ffffff;
  --color-surface-tint: #edf1f5;
  --color-ink: #111927;
  --color-ink-muted: #536275;
  --color-accent: #0f52ba;
  --color-accent-soft: #e8f0fe;
  --color-danger: #b3261e;
  --color-success: #1b6d3b;

  --font-display: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', sans-serif;
  --font-body: Seravek, 'Gill Sans Nova', Calibri, 'DejaVu Sans', sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.375rem;
  --text-xl: 2.125rem;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius: 0px;
}

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

body {
  margin: 0;
  background-color: var(--color-ground);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background-color: var(--color-accent-soft);
  color: var(--color-ink);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}