@import "./reset.css";
@import "./footer.css";
@import "./navbar.css";
@import "./landingpage.css";
@import "./catalog.css";
@import "./contact.css";
@import "./detail-product.css";

@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

:root {
  --color-bg: #f1f5f9;
  --color-bg-header: #edf1f7;
  --color-bg-footer: aliceblue;
  --color-logo: #ca8a04;
  --color-title: #2b2f34;
  --color-accent: #6f5900;
  --color-accent2: #fed000;
  --color-navbar-links: #3a4758;
  --color-text: #585c61;
  --color-catalog-btn: #dee3ea;
  --color-detail-btn: #edf1f7;
  --color-price: #ab2d00;
  --color-card1: #edf1f7;
  --color-card2: rgb(64, 206, 243, 0.1);
  --color-card3: #ffffff;
  --color-card4: rgb(254, 208, 0, 0.1);
  --color-line-border1: rgb(170, 173, 179, 0.1);
  --color-line-border2: rgb(111, 89, 0, 0.1);
  --color-in-stock: #22c55e;
  --color-form-placeholder: #aaadb3;
  --color-form-input: #d8dde5;
  --color-btn-contact-text: #fff2d2;
  --color-btn-contact-bg: linear-gradient(
    50deg,
    rgba(111, 89, 0, 1) 0%,
    rgba(254, 208, 0, 1) 100%
  );
}

body {
  background-color: var(--color-bg);
}

h1,
h2,
h3,
h4,
h5,
h6,
button {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--color-title);
}

p,
input,
textarea,
label {
  font-family: "Be Vietnam Pro", sans-serif;
  color: var(--color-text);
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2.25rem;
}

h3 {
  font-size: 1.875rem;
}
h4 {
  font-size: 1.5rem;
}
h5 {
  font-size: 1.25rem;
}
h6 {
  font-size: 1.125rem;
}
p {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

input,
textarea {
  font-size: 1rem;
  color: var(--color-form-placeholder);

  background-color: var(--color-form-input);
  border-radius: 32px;
  border: none;

  padding: 10px 15px;
}

textarea {
  min-height: 100px;
}

label {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.875rem;
  color: var(--color-text);
  padding: 10px 0;
}

button {
  border: none;
  border-radius: 40px;
  padding: 20px 30px;
  font-weight: 800;
}

button:active {
  transform: translateY(0);
}
button:hover {
  filter: brightness(0.9);
  transform: translateY(-2px);
}