/* ============================================================
   variables.css — Design tokens / CSS custom properties
   ============================================================ */

:root {
  /* Backgrounds */
  --bg-primary: #080B14;
  --bg-surface: rgba(255, 255, 255, 0.04);
  --bg-surface-hover: rgba(255, 255, 255, 0.07);

  /* Accents */
  --accent-blue: #5278FF;
  --accent-purple: #9B59F5;
  --accent-blue-hover: #6389FF;

  /* Text */
  --text-primary: #E8EAF0;
  --text-muted: rgba(255, 255, 255, 0.5);
  --text-hint: rgba(255, 255, 255, 0.25);

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-accent: rgba(82, 120, 255, 0.4);

  /* Typography */
  --font-display: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  /* Border radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-pill: 20px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
}