:root {
  /* Colours from Figma */
  --color-bg-primary: #010302;
  --color-hero-end: #010302;
  --color-bg-section: #060910;
  --color-bg-game: #050a0d;
  --color-bg-footer: #030508;
  --color-bg-page: #070f16;
  --color-bg-input: rgba(254, 254, 253, 0.06);
  --color-bg-header: rgba(254, 254, 253, 0.04);
  --color-bg-button: rgba(254, 254, 253, 0.08);
  --color-bg-button-strong: rgba(254, 254, 253, 0.14);
  --color-text-primary: #fefefd;
  --color-text-secondary: rgba(254, 254, 253, 0.8);
  --color-text-white: #ffffff;
  --color-accent-gold: #c3b299;
  --color-accent-gradient-start: #d8d2c6;
  --color-accent-gradient-mid: #ffffff;
  --color-accent-gradient-end: #c1af95;
  --color-border: rgba(254, 254, 253, 0.08);
  --color-overlay-dark: rgba(1, 3, 2, 0.7);
  --color-overlay-mid: rgba(1, 3, 2, 0.15);
  --color-overlay-section: rgba(1, 3, 2, 0.8);
  --color-overlay-slot: rgba(4, 7, 9, 0.6);
  --color-shadow: #010101;

  /* Typography */
  --font-display: "Amarante", Georgia, serif;
  --font-body: "Roboto", Arial, sans-serif;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 0.625rem;
  --space-md: 1rem;
  --space-lg: 1.25rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 2.5rem;
  --space-4xl: 3.75rem;
  --space-section: clamp(3.75rem, 8vw, 7.5rem);

  /* Radii */
  --radius-sm: 0.625rem;
  --radius-md: 1.25rem;
  --radius-lg: 1.5rem;
  --radius-xl: 1.875rem;
  --radius-pill: 2.875rem;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(1, 1, 1, 0.8);
  --shadow-md: 0 4px 6px rgba(1, 1, 1, 0.3);
  --shadow-logo: 0 0 8px rgba(1, 1, 1, 0.4);
  --shadow-symbol: 0 0 12px var(--color-shadow);

  /* Layout */
  --max-width: 81rem;
  --header-height: 5rem;
  --container-padding: clamp(1rem, 4vw, 6.25rem);
}