@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Marmelad&family=Roboto:wght@400;500;700&display=swap');

:root {
  --accent-text: #000000;
  --border-radius-lg: 24px;
  --border-radius-md: 16px;
  --border-radius-sm: 8px;
  --button-blue: #0063D4;
  --checkmark-bg: #4CAF50;
  --divider-color: #E0E0E0;
  --menu-bg: #F2F2F2;
  --primary-bg: #FFFFFF;
  --secondary-bg: #000000;
  --text-on-dark: #FFFFFF;

  /* Standard colour palette */
  --primary-blue: #0063D4;
  --dark-blue: #013268;
  --hover-blue: #004a99;
  --white: #FFFFFF;
  --white-90: rgba(255, 255, 255, 0.9);
  --white-85: rgba(255, 255, 255, 0.85);
  --gray-bg: #F2F2F2;
  --gray: #333333;
  --text-dark: #000000;
  --text-light: #FFFFFF;
  --stage-bg: #f8f9fa;
}

body {
  font-family: 'Roboto', sans-serif;
}

/* Base button styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: var(--border-radius-sm);
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--primary-blue);
  color: var(--primary-blue);
}

.btn-outline:hover {
  background: rgba(0, 99, 212, 0.1);
}

.btn-outline-light {
  background: transparent;
  border: 2px solid var(--white);
  color: var(--white);
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--white);
}

.btn-solid {
  background: var(--primary-blue);
  border: none;
  color: var(--white);
}

.btn-solid:hover {
  background: var(--hover-blue);
}

.btn-portfolio {
  background: var(--white);
  color: var(--primary-blue);
  border: none;
}

.btn-portfolio:hover {
  background: rgba(255, 255, 255, 0.9);
}