/*
  Afar Labs design tokens.
  THE ONLY place colors, fonts, spacing and radius are defined.
  Change the look of the whole site by editing this block (docs/04-design-direction.md).
*/
:root {
  /* Native controls (selects, checkboxes, scrollbars) follow the theme. */
  color-scheme: dark;

  /* Colors */
  --bg: #0a0a0b;
  --surface: #141416;
  --surface-2: #1c1c1f;
  --border: #2a2a2e;
  --text: #f2f2f3;
  --text-muted: #9a9aa1;
  --accent: #2BFFEA;
  --accent-ink: #001a17;
  --success: #3ddc84;
  --warning: #ffb547;
  --danger: #ff5d5d;
  --info: #7cb4ff;

  /* Fonts */
  --font-heading: "Bespoke Serif", "Playfair Display", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;

  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: clamp(2.25rem, 6vw, 3.5rem);

  /* Shape and spacing */
  --radius: 10px;
  --radius-sm: 6px;
  --radius-pill: 999px;
  --space: 8px;

  /* Layout */
  --content-width: 1080px;
  --auth-width: 420px;
  --header-height: 64px;

  /* Effects */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  --transition: 150ms ease;
}