/* app/static/css/base/typography.css */
/* Base Typography using CSS variables */

/* Apply base font, size, line height, color, and background to the body */
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-md); /* Uses new base size (1rem = 16px) */
  line-height: var(--line-height-base); /* Uses new base line height (1.6) */
  color: var(--color-text-primary); /* Uses new text color variable */
  background-color: var(--color-background); /* Uses new background variable */
  -webkit-font-smoothing: antialiased; /* Optional: Improve font rendering */
  -moz-osx-font-smoothing: grayscale; /* Optional: Improve font rendering */
}

/* Base link styling */
a {
  color: var(--color-link);
  text-decoration: none; /* Optional: Remove default underline */
  transition: color var(--transition-duration-default)
    var(--transition-timing-function-default); /* Use transition variables */
}

a:hover {
  color: var(--color-link-hover); /* Uses new link hover variable */
  text-decoration: underline; /* Optional: Add underline on hover */
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(
    --line-height-heading
  ); /* Changed from --line-height-tight */
  margin-top: 0; /* Reset default top margin */
  margin-bottom: var(--spacing-sm); /* Uses new spacing scale (0.5rem) */
  color: var(
    --color-text-primary
  ); /* Ensure headings use primary text color by default */
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Use new font size variables */
h1 {
  font-size: var(--font-size-3xl);
} /* Was 2xl, adjusted based on new scale */
h2 {
  font-size: var(--font-size-2xl);
} /* Was xl */
h3 {
  font-size: var(--font-size-xl);
} /* Was lg */
h4 {
  font-size: var(--font-size-lg);
} /* Was md */
h5 {
  font-size: var(--font-size-md);
}
h6 {
  font-size: var(--font-size-sm);
}

/* Paragraphs */
p {
  margin-top: 0;
  margin-bottom: var(--spacing-md); /* Uses new spacing scale (1rem) */
}

/* Lists */
ul,
ol {
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-lg); /* Indent lists */
}
li {
  margin-bottom: var(--spacing-xs);
}

/* Other common elements */
strong,
b {
  font-weight: var(--font-weight-bold);
}
em,
i {
  font-style: italic;
}
blockquote {
  margin: 0 0 var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  border-left: 4px solid var(--color-border);
  color: var(--color-text-secondary);
  font-style: italic;
}
hr {
  border: 0;
  border-top: var(--border-width-default) solid var(--color-border);
  margin: var(--spacing-lg) 0;
}
code,
kbd,
samp,
pre {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
}
pre {
  display: block;
  padding: var(--spacing-md);
  margin: 0 0 var(--spacing-md);
  overflow: auto;
  background-color: var(--color-surface-2); /* Use a surface color */
  border-radius: var(--border-radius-md);
  color: var(
    --color-text-primary
  ); /* Ensure text color contrasts with background */
}

/* Utility Classes (Keep these as they use variables) */
.text-xs {
  font-size: var(--font-size-xs);
} /* New size added in base_variables_v1 */
.text-sm {
  font-size: var(--font-size-sm);
}
.text-md {
  font-size: var(--font-size-md);
}
.text-lg {
  font-size: var(--font-size-lg);
}
.text-xl {
  font-size: var(--font-size-xl);
}
.text-2xl {
  font-size: var(--font-size-2xl);
}
.text-3xl {
  font-size: var(--font-size-3xl);
}
.text-4xl {
  font-size: var(--font-size-4xl);
} /* New size */

.text-primary {
  color: var(--color-text-primary);
}
.text-secondary {
  color: var(--color-text-secondary);
}
.text-muted {
  color: var(--color-text-muted);
}
.text-link {
  color: var(--color-link);
} /* Added */
.text-success {
  color: var(--color-success);
} /* Added */
.text-warning {
  color: var(--color-warning);
} /* Added */
.text-danger {
  color: var(--color-danger);
} /* Added */
.text-info {
  color: var(--color-info);
} /* Added */

.text-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.text-bold {
  font-weight: var(--font-weight-bold);
}
.text-normal {
  font-weight: var(--font-weight-normal);
}
.text-light {
  font-weight: var(--font-weight-light);
} /* Added */

/* Responsive heading adjustments (Keep using variables) */
@media (min-width: 768px) {
  h1 {
    font-size: var(--font-size-4xl);
  } /* Was 3xl */
  h2 {
    font-size: var(--font-size-3xl);
  } /* Was 2xl */
  h3 {
    font-size: var(--font-size-2xl);
  } /* Was xl */
  h4 {
    font-size: var(--font-size-xl);
  } /* Added */
}