@import 'normalize.css';
@import 'fonts.css';

body {
  --color-bg-dark: #3E3D3C;
  --color-bg-white: white;
  --color-bg-grey: #F4F4F4;
  
  --color-font-dark: #3E3D3C;
  --color-font-light: #FDFDFD;
  --color-font-grey: #6A6A6A;
  --color-font-accent: #6B789A;

  --color-border: #6A6A6A;
  --color-hr: #cacaca;

  --font-title: 'HyundaiSansHeadOffice', sans-serif;
  --font-text: 'Inter', sans-serif;
  --font-onest: 'Onest', sans-serif;

  font-family: var(--font-text);
  background-color: var(--color-bg-white);
  color: var(--color-font-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;

  --foreground: 240 10% 3.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --card-border: 240 5.9% 90%;
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --success: 142 76% 36%;
  --success-foreground: 0 0% 98%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 240 5.9% 10%;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--font-title);
  font-weight: 500;
  margin: 0;
}

h1 {
  font-size: clamp(45px, 9.72vw, 140px);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.2;
}

h2 {
  text-transform: uppercase;
  font-size: clamp(24px, 4.37vw, 63px);
}

.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-top: 80px;
}

@media (width < 1200px) {
  .container {
    padding-inline: 40px;
  }
}

@media (width < 768px) {
  .container {
    padding-top: 80px;
    padding-inline: 20px;
  }
}

a {
  text-decoration: none;
}

.badge {
  background-color: var(--color-bg-grey);
  color: var(--color-border);
  text-transform: uppercase;
  font-size: 20px;
  padding: 12px 24px;
  border-radius: 100px;
}

@media (width < 768px) {
  .badge {
    font-size: 16px;
  }
}

.button {
  border-radius: 100px;
  border: 1px solid var(--color-border);
  padding: 20px 45px;
  color: var(--color-border);
  font-size: 20px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}

@media (width < 768px) {
  .button {
    padding: 18px 35px;
    font-size: 16px;
    width: 100%;
    
  }
}

.button-dark {
  background-color: var(--color-bg-dark);
  border-color: var(--color-bg-dark);
  color: var(--color-font-light);
}

.onest-text {
  font-family: var(--font-onest);
  font-weight: 300;
  font-size: clamp(16px, 2vw, 30px);
  line-height: 1.4;
  color: var(--color-font-grey);
  letter-spacing: 4%;
}

.fw400 {
  font-weight: 400;
}

.fw500 {
  font-weight: 500;
}

.fw700 {
  font-weight: 700;
}

.mt10 {
  margin-top: 10px;
}

.mt30 {
  margin-top: 30px;
}