@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

/* Local Font Declarations */
@font-face {
  font-family: "Metropolis";
  src: url("assets/fonts/Metropolis-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Metropolis";
  src: url("assets/fonts/Metropolis-ThinItalic.otf") format("opentype");
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: "Metropolis";
  src: url("assets/fonts/Metropolis-ExtraLight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "Metropolis";
  src: url("/assets/fonts/Metropolis-ExtraLightItalic.otf")
    format("opentype");
  font-weight: 200;
  font-style: italic;
}

@font-face {
  font-family: "Metropolis";
  src: url("/assets/fonts/Metropolis-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Metropolis";
  src: url("/assets/fonts/Metropolis-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "Metropolis";
  src: url("/assets/fonts/Metropolis-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Metropolis";
  src: url("/assets/fonts/Metropolis-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Metropolis";
  src: url("/assets/fonts/Metropolis-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Metropolis";
  src: url("/assets/fonts/Metropolis-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "Metropolis";
  src: url("/assets/fonts/Metropolis-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Metropolis";
  src: url("/assets/fonts/Metropolis-SemiBoldItalic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: "Metropolis";
  src: url("/assets/fonts/Metropolis-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Metropolis";
  src: url("/assets/fonts/Metropolis-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "Metropolis";
  src: url("/assets/fonts/Metropolis-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Metropolis";
  src: url("/assets/fonts/Metropolis-ExtraBoldItalic.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
}

@font-face {
  font-family: "Metropolis";
  src: url("/assets/fonts/Metropolis-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Metropolis";
  src: url("/assets/fonts/Metropolis-BlackItalic.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: "SkyWalk";
  src: url("/assets/fonts/sky-walk.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* CSS Custom Properties (Variables) */
:root {
  /* Primary Blue Palette */
  --primary-50: #ccd2f2;
  --primary-100: #aab4e9;
  --primary-200: #808fde;
  --primary-300: #566ad2;
  --primary-400: #2b44c7;
  --primary-500: #011fbc; /* Base color */
  --primary-600: #011a9d;
  --primary-700: #01157d;
  --primary-800: #01105e;
  --primary-900: #000a3f;
  --primary-950: #000626;

  /* Secondary Light Blue Palette */
  --secondary-50: #eff5fd;
  --secondary-100: #e4eefc;
  --secondary-200: #d7e5fa;
  --secondary-300: #cadcf8;
  --secondary-400: #bcd4f7;
  --secondary-500: #afcbf5; /* Base color */
  --secondary-600: #92a9cc;
  --secondary-700: #7587a3;
  --secondary-800: #58667b;
  --secondary-900: #3a4452;
  --secondary-950: #232931;

  /* Accent Orange/Yellow Palette */
  --accent-50: #f8e9d1;
  --accent-100: #f3dab3;
  --accent-200: #edc88d;
  --accent-300: #e7b567;
  --accent-400: #e1a341;
  --accent-500: #db901b; /* Base color */
  --accent-600: #b77817;
  --accent-700: #926012;
  --accent-800: #6e480e;
  --accent-900: #493009;
  --accent-950: #2c1d05;

  /* Neutral Cream/Beige Palette */
  --neutral-50: #fdf8f3;
  --neutral-100: #fcf3ea;
  --neutral-200: #fbede0;
  --neutral-300: #f9e6d6;
  --neutral-400: #f8e0cb;
  --neutral-500: #f6dac1; /* Base color */
  --neutral-600: #cdb6a1;
  --neutral-700: #a49181;
  --neutral-800: #7b6d61;
  --neutral-900: #524940;
  --neutral-950: #312c27;

  /* Warm Pink/Red Palette */
  --warm-50: #feedec;
  --warm-100: #fde1e0;
  --warm-200: #fcd3d1;
  --warm-300: #fbc4c1;
  --warm-400: #fab5b2;
  --warm-500: #f9a6a2; /* Base color */
  --warm-600: #d08a87;
  --warm-700: #a66f6c;
  --warm-800: #7d5351;
  --warm-900: #533736;
  --warm-950: #322120;

  /* Font Variables */
  --font-inter: "Inter", sans-serif;
  --font-metropolis: "Metropolis", sans-serif;
  --font-skywalk: "SkyWalk", cursive, fantasy, sans-serif;
}

/* Base Typography Setup */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

body {
  font-family: var(--font-inter);
  color: var(--primary-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}