/*
Subject: Minimal accessible event registration and accreditation desk.
Idea: A quiet terminal-inspired event manifest desk where security verification checks, badge assets, and attendee session authentication unite seamlessly in high-contrast calm layouts.
Color palette:
  - Ground: oklch(98.5% 0.005 240)
  - Ink: oklch(18% 0.02 250)
  - Accent: oklch(48% 0.16 250)
  - Muted: oklch(93% 0.01 245)
  - Dark surface: oklch(24% 0.03 250)
  - Subtle border/line: oklch(86% 0.015 245)
Typography:
  - Display / Headings: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', sans-serif-condensed, sans-serif
  - Body / Form elements: Inter, Roboto, 'Helvetica Neue', Arial, sans-serif
*/

:root {
  --color-ground: oklch(98.5% 0.005 240);
  --color-ink: oklch(18% 0.02 250);
  --color-accent: oklch(48% 0.16 250);
  --color-surface: oklch(100% 0 0);
  --color-muted: oklch(94% 0.01 245);
  --color-ink-secondary: oklch(44% 0.02 250);
  --color-danger: oklch(48% 0.18 25);
  --color-success: oklch(50% 0.16 145);

  --font-display: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', sans-serif-condensed, sans-serif;
  --font-body: Inter, Roboto, 'Helvetica Neue', Arial, sans-serif;

  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.5rem;
  --font-size-xl: 2.25rem;

  --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;
  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);
  color: #ffffff;
}

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

a {
  color: var(--color-accent);
  text-underline-offset: 3px;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}