/* Gaymes design tokens. Every colour, size and radius comes from here. */
:root {
  /* Surfaces */
  --bg: #0D0A1A;
  --surface: #17122B;
  --surface-raised: #221A3D;
  --border: rgba(255, 255, 255, 0.08);

  /* Text */
  --text: #FFFFFF;
  --text-secondary: #C9C2E0;
  --text-muted: #8F87AD;

  /* Quiz formats */
  --format-gk: #A46BFF;
  --format-mini: #FF4FA8;
  --format-picture: #FF8A3D;
  --format-sound: #3FA7FF;
  --format-map: #36D98A;
  --format-video: #FF4D5E;

  /* Rainbow, matching the logo */
  --rainbow-1: #FF4D5E;
  --rainbow-2: #FF8A3D;
  --rainbow-3: #FFD23F;
  --rainbow-4: #36D98A;
  --rainbow-5: #3FA7FF;
  --rainbow-6: #A46BFF;

  /* Status */
  --success: #36D98A;
  --warning: #FFB86B;
  --danger: #FF6B7A;

  /* Type */
  --font-display: "Fredoka", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing (8px scale) and shape */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --radius-card: 20px;
  --radius-pill: 999px;
  --tap-min: 48px;

  --ease: cubic-bezier(.2, .7, .2, 1);
}