/* Montserrat */
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

/* Source Sans 3 */
@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/fonts/SourceSans3-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

/* Merriweather */
@font-face {
  font-family: "Merriweather";
  src: url("/assets/fonts/Merriweather-VariableFont_opsz,wdth,wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

/* ---------------------------------------------------------
   ROOT VARIABLES
--------------------------------------------------------- */
:root {
  /* Colors */
  --primary-color: #0C2B4E;
  --secondary-color: #1A3D64;
  --tertiary-color: #1D546C;
  --dark-primary-color: #343434;
  --dark-secondary-color: #867e7e;
  --gray-color: #737373;
  --white-color: #f6f4f0;

  /* Fonts */
  --primary-font: "Montserrat", sans-serif;
  --secondary-font: "Source Sans 3", sans-serif;
  --text-font: "Merriweather", serif;

  /* Typography System */
  --ff-head: "Merriweather", serif;
  --ff-body: "Muli", sans-serif;
  --fs-body: 1rem;
  --fs-h2: 3rem;
  --fs-h4: 1rem;
  --fs-h5: 1rem;

  --clr-head: hsla(208, 11%, 15%, 1);
  --clr-body: hsla(208, 9%, 31%, 0.8);
  --clr-accent: hsla(216, 97%, 61%, 1);

  box-sizing: border-box;
}

/* ---------------------------------------------------------
   GLOBAL RESET + LAYOUT STABILITY
--------------------------------------------------------- */
html {
  font-size: 100%;
  box-sizing: inherit;
  height: -webkit-fill-available;

  /* Smoothness & Navigation */
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  overscroll-behavior: smooth;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

/* ---------------------------------------------------------
   TYPOGRAPHY RENDERING (CRISP TEXT)
--------------------------------------------------------- */
body {
  font-family: var(--primary-font);
  background: var(--white-color);
  color: var(--dark-primary-color);
  line-height: 1.6;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Prevent layout shifting when fonts load */
body {
  font-display: swap;
}

/* ---------------------------------------------------------
   SECTION NAVIGATION SUPPORT
--------------------------------------------------------- */
section {
  scroll-margin-top: 80px; /* ensures no section hides under navbar */
}

/* ---------------------------------------------------------
   GLOBAL SMOOTH TRANSITIONS
--------------------------------------------------------- */
a, button {
  transition: 0.25s ease;
}

/* ---------------------------------------------------------
   HARDWARE ACCELERATION (for animations)
--------------------------------------------------------- */
.smooth {
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* ---------------------------------------------------------
   IMAGE HANDLING (clean scaling + no dragging)
--------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------------------------------------------------------
   MOBILE OVERSCROLL CONTROL
--------------------------------------------------------- */
body {
  overscroll-behavior-y: none;
}

/* ---------------------------------------------------------
   END OF GLOBAL ENHANCEMENTS
--------------------------------------------------------- */

/* Body alternative styles kept for reference */
/*
body {
  font-family: "Roboto", ui-sans-serif, sans-serif;
  font-size: clamp(1rem, 2vw, 1.125rem);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-gray-100);
  background-color: var(--color-dark-500);
}
*/