/* =========================
   FONT IMPORTS
========================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

/* =========================
   RESET
========================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;

  background: var(--color-bg);
  color: var(--color-text-900);

  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--line-body);

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

/* =========================
   TYPOGRAPHY
========================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);

  color: var(--color-text-900);

  line-height: var(--line-heading);
  letter-spacing: var(--tracking-tight);

  font-weight: 700;
}

h1 {
  font-size: clamp(48px, 6vw, var(--text-display));
}

h2 {
  font-size: clamp(36px, 4vw, var(--text-h2));
}

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

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

p {
  color: var(--color-text-700);
}

.text-body-lg {
  font-size: var(--text-body-lg);
}

.text-body-sm {
  font-size: var(--text-body-sm);
}

.text-caption {
  font-size: var(--text-caption);
}

/* =========================
   GLOBAL LAYOUT
========================= */

.page-wrapper {
  overflow: hidden;
}

.container {
  width: min(100% - 40px, var(--container-width));
  margin-inline: auto;
}

.container-narrow {
  width: min(100% - 40px, var(--container-narrow));
  margin-inline: auto;
}

.section {
  padding:
    var(--space-24)
    0;
}

.section-sm {
  padding:
    var(--space-16)
    0;
}

.section-lg {
  padding:
    120px
    0;
}

/* =========================
   SURFACE HELPERS
========================= */

.surface {
  background: var(--color-surface);
}

.surface-soft {
  background: var(--color-surface-soft);
}

/* =========================
   GRID HELPERS
========================= */

.grid {
  display: grid;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1024px) {

  .section {
    padding:
      var(--space-20)
      0;
  }

  .section-lg {
    padding:
      100px
      0;
  }
}

@media (max-width: 768px) {

  .container,
  .container-narrow {
    width: min(100% - 24px, var(--container-width));
  }

  .section {
    padding:
      var(--space-16)
      0;
  }

  .section-lg {
    padding:
      80px
      0;
  }

  h1 {
    font-size: 48px;
  }

  h2 {
    font-size: 36px;
  }

  h3 {
    font-size: 24px;
  }
}