@import "/assets/fonts/icons/icons.css";
@import "/styles/utils.css";
@import "/components/navbar/navbar.css";
@import "/components/contact/contact.css";
@import "/components/footer/footer.css";
@import "/components/featured-projects/featured-projects.css";

:root {
  /* Primary colors */
  --color-primary: #a91916;
  --color-secondary: #000000;
  --color-tertiary: #efefef;
  --color-background: #ffffff;
  /* Other colors */
  --color-primary-600: #781210;
  --color-primary-500: #a91916;
  --color-primary-400: #ba4745;
  --color-primary-200: #d79594;
  --color-primary-50: #f6e8e8;
  --color-secondary-700: #646464;
  --color-secondary-500: #aaaaaa;
  --color-secondary-400: #d9d9d9;
  --color-secondary-300: #efefef;
  --color-secondary-200: #f2f2f2;
  --color-secondary-100: #f2f2f2;
  --color-secondary-50: #fdfdfd;
  --color-neutral-700: #000000;
  --color-neutral-600: #141414;
  --color-neutral-500: #1f1f1f;
  --color-neutral-400: #262626;
  --color-neutral-300: #454545;
  --color-neutral-200: #595959;
  --color-neutral-50: #bfbfbf;
  --color-neutral-12: #141414;
  --color-neutral: #fdfdfd;
  /* Font family */
  --font-main: "Saira", sans-serif;
  /* Font sizes */
  --fs-xl: 2.5rem;
  --fs-lg: 2rem;
  --fs-md: 1.5rem;
  --fs-sm: 1rem;
  --fs-xs: 0.875rem;
  --fs-xxs: 0.75rem;
  /* Weights */
  --fw-bold: 700;
  --fw-medium: 500;
  --fw-regular: 400;
  /* Paddings */
  --horizontal-padding-desktop: calc((100% - 78.75rem) / 2);
}

/* === Global reset and base styles === */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
input,
button,
textarea {
  font-family: var(--font-main);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

button,
input,
ul,
li,
table,
tr,
th,
td {
  padding: 0;
  margin: 0;
  border: none;
  background-color: transparent;
  outline: none;
  list-style-type: none;
  text-decoration: none;
}

b {
  font-weight: 600;
}

button,
li,
a {
  cursor: pointer;
}

body {
  width: 100dvw;
  height: 100dvh;
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: var(--color-background);
}

main {
  overflow: hidden;
}
