@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
  --font-size-sm: clamp(0.75rem, 0.862rem + -0.145vi, 0.833rem);
  --font-size-base: clamp(1rem, 1rem + 0vi, 1rem);
  --font-size-md: clamp(1.2rem, 1.154rem + 0.231vi, 1.333rem);
  --font-size-lg: clamp(1.44rem, 1.323rem + 0.586vi, 1.777rem);
  --font-size-xl: clamp(1.728rem, 1.505rem + 1.114vi, 2.369rem);
  --font-size-xxl: clamp(2.074rem, 1.697rem + 1.885vi, 3.157rem);
  --font-size-xxxl: clamp(2.488rem, 1.89rem + 2.992vi, 4.209rem);
}

body, p, small, a {
  font-family: 'Inter', 'Arial', sans-serif;
}

h1, h2, h3, h4, h5, button {
  font-family: 'Outfit', 'Arial', sans-serif;
  font-weight: 600;
}

html { font-size: var(--font-size-base); }

h1 { 
  font-size: var(--font-size-xxl); 
  font-weight: 900;
}

h2 { font-size: var(--font-size-xxl); }

h3 { font-size: var(--font-size-xl); }

h4 { font-size: var(--font-size-lg); }

h5 { font-size: var(--font-size-md); }

p, button {
  font-size: var(--font-size-base);
}

small, label { font-size: var(--font-size-sm); }