/*
  Subject list:
  1. Event Registration Desk - pass check-in, badges, verification
  2. The badge card and docket - compact, legible, structured data
  3. The status check list - verification items (status field in checks collection)
  4. Identification upload - document / ticket stub upload under 1MB
  5. The venue timetable - Morning (20 capacity) and Afternoon (30 capacity) sessions
  6. Monochrome utility paper palette - deep ink, clean bone ground, vibrant amber signal
  7. Clear authentication states - visitor sign in, session awareness, sign out
  8. Direct actions - "Sign in to register", "Save check status", "Upload document"

  Idea sentence:
  On this site, the event intake docket becomes an authentic check-in console where registration credentials, validation checks, and attendee attachments are processed cleanly without clutter.
  competitor test: A generic registration SaaS uses pastel landing gradients and cards; here it is an industrial, precision event intake desk with strictly tabular capacity records, direct check records, and file uploads.
*/

:root {
  --color-ground: #f6f5f1;
  --color-surface: #ffffff;
  --color-ink: #16171a;
  --color-muted: #5e636e;
  --color-accent: #0f62fe;
  --color-border: #d0d4dc;
  --color-success-bg: #defbe6;
  --color-success-ink: #0e6027;
  --color-error-bg: #ffebe8;
  --color-error-ink: #ba1a1a;

  --font-display: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', -apple-system, sans-serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

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

  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
}

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

html {
  font-family: var(--font-body);
  background-color: var(--color-ground);
  color: var(--color-ink);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
}

@media (min-width: 640px) {
  body {
    padding: var(--space-8) var(--space-6);
  }
}

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

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