/*
 * Design plan:
 * 1. Subject list: Event registration, badge verification, attendee pass, security checklist, document upload, timestamped status, check-in desk, lanyard badge.
 * 2. Idea: On this site, the security check-in desk docket becomes a clean, functional event portal with live auth status, dynamic checks ledger, and secure credential upload.
 * 3. Contrast & Palette: Crisp architectural slate ground, dark charcoal ink, warm amber accent, soft slate cards.
 * 4. Typography: Humanist sans for high legibility on screens and mobile check-in devices.
 * 5. Corner: crisp modern 4px radius consistently across buttons, inputs, cards.
 */

:root {
  --color-ground: #f4f6f8;
  --color-surface: #ffffff;
  --color-surface-tint: #eaedf1;
  --color-ink: #192028;
  --color-ink-muted: #576472;
  --color-accent: #0f62fe;
  --color-accent-hover: #0043ce;
  --color-accent-soft: #edf5ff;
  --color-danger: #da1e28;
  --color-danger-soft: #fff1f1;
  --color-success: #198038;
  --color-success-soft: #defbe6;

  --font-display: Seravek, 'Gill Sans Nova', Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
  --font-body: Seravek, 'Gill Sans Nova', Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;

  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;

  --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-subtle: 4px;
}

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

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

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

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