/* tokens.css
 * Subject: Minimal Event Registration & Delegate Check-In Station
 * 10 distinct subject elements:
 * 1. Badge accreditation desk & check-in terminal
 * 2. Real-time checklist entries ('checked-in', 'dietary verified', 'materials collected')
 * 3. File upload for delegate verification document/pass slip
 * 4. Crisp credential-style deep obsidian ink and parchment ground
 * 5. Signal green accent representing verified status and registration completion
 * 6. Clean tabular lists with monospace identifiers
 * 7. Fast auth toggle for delegate session verification
 * 8. Zero external dependencies, pure semantic DOM
 * 9. High-contrast accessible form controls with robust state messages
 * 10. Distinct sharp corners (4px slight radius) for ticket and registry precision
 *
 * Design idea: On this site, the delegate accreditation desk checklist becomes a functional single-screen verification terminal.
 * One bold element: A live check-in telemetry status bar integrated directly with the Database checks and Files upload engine.
 */

:root {
  --color-ground: #f6f5f1;
  --color-surface: #ffffff;
  --color-surface-dim: #eceae1;
  --color-ink: #14171a;
  --color-ink-muted: #535961;
  --color-accent: #0f6f47;
  --color-accent-soft: #e3f4eb;
  --color-danger: #9a1b1b;
  --color-danger-soft: #fde8e8;

  --font-display: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
  --font-body: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;

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

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

  --radius-sm: 4px;
  --radius-full: 9999px;
}

*, *::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-text-size-adjust: 100%;
}

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

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