@import '/styles/fontface.css';

:root {
  /* MUTED COLORS */
  --white: #fdfdfd;
  --gray-1: #f5f5f5;
  --gray-2: #dedede;
  --gray-3: #b4b4b4;
  --gray-4: #676767;
  --gray-5: #434343;
  --black: #1d1d1f;

  /* COLORS */
  --green: #288d52;
  --light-green: #3dbf6d;
  --red: #be3939;
  --yellow: #f5c518;
  --orange: #e46248;
  --blue: #0071e3;
  --light-blue: #00a0e3;
  --purple: #ac92ec;
  --pink: #f7a8b8;

  /* TRANSPARENT BACKGROUND */
  --transparent-background-1: rgba(255, 255, 255, 0.1);
  --transparent-background-2: rgba(255, 255, 255, 0.2);
  --transparent-background-3: rgba(255, 255, 255, 0.4);
  --transparent-background-4: rgba(255, 255, 255, 0.6);
  --transparent-background-5: rgba(255, 255, 255, 0.8);

  /* SHADOWS */
  --shadow-1: rgba(0, 0, 0, 0.1);
  --shadow-2: rgba(0, 0, 0, 0.2);
  --shadow-3: rgba(0, 0, 0, 0.3);

  /* FONTS */
  --font-1: 'SFPro', sans-serif;

  /* FONT SIZES */
  --title: 4rem;
  --subtitle: 1.3rem;
  --paragraph: 1rem;
  --microcopy: 0.9rem;
  --icons: 1.5rem;

  /* FONT WEIGHTS */
  --thin: 200;
  --light: 300;
  --regular: 400;
  --semi-bold: 500;
  --bold: 600;
  --heavy: 700;

  /* BORDER RADIUS */
  --radius-1: 10rem;
  --radius-2: 2rem;
  --radius-3: 1rem;
  --radius-4: 0.5rem;

  /* TRANSITIONS */
  --loading: 1s;
  --slow: 0.5s;
  --steady: 0.3s;
  --fast: 0.1s;

  /* TEXT SPACING */
  --line-height: 1.3;
  --letter-spacing: 0.022em;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* DEFAULTS */
body {
  scroll-behavior: smooth;
  background-color: var(--white);
  font-family: var(--font-1);
  font-size: var(--paragraph);
  font-weight: var(--regular);
  color: var(--black);
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height);
}

main {
  position: relative;
  overflow-x: hidden;
}

/* BUTTON */
button {
  background-color: var(--black);
  border-radius: var(--radius-1);
  outline: none;
  border: none;
  font-family: var(--font);
  font-weight: var(--light);
  color: var(--white);
  cursor: pointer;
  transition: var(--steady);
}

button:hover {
  transform: scale(1.03);
}

button:active {
  transform: scale(1);
}

button:disabled {
  background-color: var(--gray-4);
}

/* LINK */
a,
a:visited {
  text-decoration: none;
  cursor: pointer;
}

a {
  color: var(--black);
}

a:hover {
  text-decoration: underline;
}

/* INPUT */
input {
  outline: none;
  border: 1px solid var(--gray-1);
  border-radius: var(--radius-1);
  padding: 0.5rem 1rem;
  font-family: var(--font);
  font-weight: var(--light);
  font-size: var(--paragraph);
  transition: var(--fast);
}

textarea {
  resize: none;
  outline: none;
  border: 1px solid var(--gray-1);
  border-radius: var(--radius-3);
  padding: 0.5rem 1rem;
  font-family: var(--font);
  font-weight: var(--light);
  font-size: var(--paragraph);
  transition: var(--fast);
}

select {
  outline: none;
  border: 1px solid var(--gray-1);
  border-radius: var(--radius-1);
  padding: 0.5rem 1rem;
  color: var(--black);
  font-family: var(--font);
  font-weight: var(--light);
  font-size: var(--paragraph);
  transition: var(--fast);
  appearance: none;
}

/* LISTS */
ul {
  list-style: none;
}

/* USEFULL CLASSES */
.hide {
  display: none !important;
}

/* ANIMATIONS */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}