/**
 * Typography Base Styles
 * Based on Figma Design System
 */

body {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-16);
  line-height: var(--font-line-height-16);
  color: var(--content-on-surface);
  background-color: var(--background-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, .h1 {
  font-size: var(--font-size-72);
  line-height: var(--font-line-height-72);
  font-weight: var(--font-weight-semibold-72);
  color: var(--content-on-surface);
  margin-bottom: var(--spacing-24);
}

h2, .h2 {
  font-size: var(--font-size-40);
  line-height: var(--font-line-height-40);
  font-weight: var(--font-weight-semibold-40);
  color: var(--content-on-surface);
  margin-bottom: var(--spacing-20);
}

h3, .h3 {
  font-size: var(--font-size-28);
  line-height: var(--font-line-height-28);
  font-weight: var(--font-weight-semibold-28);
  color: var(--content-on-surface);
  margin-bottom: var(--spacing-16);
}

h4, .h4 {
  font-size: var(--font-size-20);
  line-height: var(--font-line-height-20);
  font-weight: var(--font-weight-semibold-20);
  color: var(--content-on-surface);
  margin-bottom: var(--spacing-12);
}

h5, .h5 {
  font-size: var(--font-size-18);
  line-height: var(--font-line-height-18);
  font-weight: var(--font-weight-semibold-18);
  color: var(--content-on-surface);
  margin-bottom: var(--spacing-12);
}

h6, .h6 {
  font-size: var(--font-size-16);
  line-height: var(--font-line-height-16);
  font-weight: var(--font-weight-semibold-16);
  color: var(--content-on-surface);
  margin-bottom: var(--spacing-8);
}

/* Paragraphs */
p {
  margin-bottom: var(--spacing-16);
}

/* Links */
a {
  color: var(--content-on-white-accent);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  text-decoration: underline;
}

a:focus {
  outline: 2px solid var(--state-focus-stroke);
  outline-offset: 2px;
}

/* Lists */
ul, ol {
  margin-bottom: var(--spacing-16);
  padding-left: var(--spacing-24);
}

li {
  margin-bottom: var(--spacing-8);
}

/* Text utilities */
.text-small {
  font-size: var(--font-size-14);
  line-height: var(--font-line-height-14);
}

.text-large {
  font-size: var(--font-size-18);
  line-height: var(--font-line-height-18);
}

.text-semibold {
  font-weight: 600;
}

.text-medium {
  font-weight: 500;
}

.text-regular {
  font-weight: 400;
}

/* Responsive Typography */
@media (max-width: 768px) {
  h1, .h1 {
    font-size: var(--font-size-40);
    line-height: var(--font-line-height-40);
  }

  h2, .h2 {
    font-size: var(--font-size-28);
    line-height: var(--font-line-height-28);
  }
}