/* Dune Buggy Dubai — Design tokens (Night Rally, v1.0) */
:root {
  /* Colours */
  --navy-900: #0D1530;
  --navy-800: #1B2A55;
  --navy-700: #2B3D6E;
  --mist-100: #EEF1F5;
  --mist-200: #DDE3EC;
  --mist-300: #C3CCD9;
  --steel-500: #7FA3CC;
  --steel-700: #2D4F7C;
  --volt-500: #C5F23A;
  --volt-600: #B2DE22;
  --volt-700: #9CC414;
  --whatsapp-500: #25D366;
  --whatsapp-600: #1EBE5A;
  --whatsapp-700: #1A8F45;
  --white: #FFFFFF;
  --off-white: #F7F8FA;
  --grey-200: #E1E5EB;
  --grey-500: #5F6878;
  --grey-700: #3A4252;
  --success: #2E7D4F;
  --error: #C0262D;
  --bg-page: var(--off-white);
  --bg-section-alt: var(--mist-100);
  --bg-dark: var(--navy-900);
  --surface-card: var(--white);
  --surface-card-dark: var(--navy-800);
  --text-primary: var(--navy-900);
  --text-secondary: var(--grey-700);
  --text-muted: var(--grey-500);
  --text-on-dark: var(--white);
  --text-on-dark-muted: var(--mist-300);
  --border-light: var(--grey-200);
  --border-mist: var(--mist-300);
  --border-dark: var(--navy-700);
  --cta: var(--volt-500);
  --on-cta: var(--navy-900);
  --accent: var(--steel-700);
  --accent-on-dark: var(--steel-500);
  --link: var(--steel-700);
  --focus-ring: var(--steel-700);
  --focus-ring-dark: var(--steel-500);

  /* Fonts */
  --font-display: "Sora", "Helvetica Neue", Arial, sans-serif;
  --font-text: "DM Sans", "Helvetica Neue", Arial, sans-serif;

  /* Spacing and layout */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --section-y-desktop: 112px;
  --section-y-mobile: 72px;
  --container-max: 1240px;
  --gutter-desktop: 24px;
  --gutter-mobile: 20px;
  --card-padding: 24px;
  --header-height: 76px;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-round: 50%;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(13,21,48,0.06), 0 4px 12px rgba(13,21,48,0.06);
  --shadow-2: 0 8px 24px rgba(13,21,48,0.12);
  --shadow-3: 0 2px 6px rgba(13,21,48,0.08), 0 12px 32px rgba(13,21,48,0.16);
  --shadow-4: 0 24px 64px rgba(13,21,48,0.24);
  --shadow-inset: inset 0 2px 0 rgba(13,21,48,0.18);

  /* Sizes */
  --button-lg: 56px;
  --button-md: 48px;
  --button-sm: 40px;
  --input-height: 52px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-stroke: 1.75px;
  --tap-min: 48px;
}