@font-face {
  font-family: 'Mark OT';
  src: url('../assets/fonts/MarkOT.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mark OT';
  src: url('../assets/fonts/MarkOT-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mark OT';
  src: url('../assets/fonts/MarkOT-Bold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colors */
  --color-pink: #FD4282;
  --color-teal: #66E5DC;
  --color-dark-navy: #070623;
  --color-header-navy: #000B2B;
  --color-white: #FFFFFF;
  --color-light-bg: #F5F5F5;
  --color-dark-blue-grey: #26263C;

  /* Typography */
  --font-primary: 'Mark OT', 'Helvetica Neue', Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;

  /* Spacing (proportional, based on 1440px design) */
  --padding-page: 6.6%; /* ~95px at 1440px */

  /* Transitions */
  --transition-default: 0.3s ease;
}