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



body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  color: var(--color-on-surface);
  background-color: var(--color-surface);
}



h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-on-surface);
}

h1 {
  font-size: var(--text-display-lg);
  font-weight: 800;
}

h2 {
  font-size: var(--text-display-md);
}

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

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

h5 {
  font-size: var(--text-title-lg);
}

h6 {
  font-size: var(--text-title-md);
}



p {
  line-height: var(--leading-normal);
}

.text-display-lg {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}

.text-display-md {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
}

.text-display-sm {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
}

.text-headline-lg {
  font-family: var(--font-display);
  font-size: var(--text-headline-lg);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.text-headline-md {
  font-family: var(--font-display);
  font-size: var(--text-headline-md);
  font-weight: 600;
  line-height: var(--leading-snug);
}

.text-headline-sm {
  font-family: var(--font-display);
  font-size: var(--text-headline-sm);
  font-weight: 600;
  line-height: var(--leading-snug);
}

.text-title-lg {
  font-family: var(--font-display);
  font-size: var(--text-title-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
}

.text-title-md {
  font-family: var(--font-display);
  font-size: var(--text-title-md);
  font-weight: 600;
  line-height: var(--leading-snug);
}

.text-title-sm {
  font-family: var(--font-display);
  font-size: var(--text-title-sm);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.text-body-lg {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-normal);
}

.text-body-md {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
}

.text-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: var(--leading-normal);
}

.text-label-lg {
  font-family: var(--font-body);
  font-size: var(--text-label-lg);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
}

.text-label-md {
  font-family: var(--font-body);
  font-size: var(--text-label-md);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
}



.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-tertiary { color: var(--color-tertiary); }
.text-on-primary { color: var(--color-on-primary); }
.text-on-secondary { color: var(--color-on-secondary); }
.text-on-surface { color: var(--color-on-surface); }
.text-on-surface-variant { color: var(--color-on-surface-variant); }
.text-muted { color: var(--color-on-surface-variant); }



.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

.tracking-tight { letter-spacing: var(--tracking-tight); }
.tracking-normal { letter-spacing: var(--tracking-normal); }
.tracking-wide { letter-spacing: var(--tracking-wide); }

.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }

.weight-normal { font-weight: 400; }
.weight-medium { font-weight: 500; }
.weight-semibold { font-weight: 600; }
.weight-bold { font-weight: 700; }



a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-container);
}

.link-underline {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link-underline:hover {
  text-decoration-thickness: 2px;
}