/* src/styles/typography.css - Enhanced Typography System */

/* Base Typography */
html {
  font-family: var(--font-family-base);
  font-size: 16px;
  line-height: var(--line-height-base);
  color: var(--main-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Responsive Fluid Typography */
:root {
  --fluid-min-width: 320;
  --fluid-max-width: 1280;
  --fluid-screen: 100vw;
  --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)));
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  font-family: var(--font-family-heading);
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--heading-color);
}

h1 {
  font-size: var(--h1-size);
  margin-bottom: 0.75em;
}

h2 {
  font-size: var(--h2-size);
  margin-bottom: 0.75em;
}

h3 {
  font-size: var(--h3-size);
  margin-bottom: 0.75em;
}

h4 {
  font-size: var(--h4-size);
  margin-bottom: 0.5em;
}

h5 {
  font-size: var(--h5-size);
  margin-bottom: 0.5em;
}

h6 {
  font-size: var(--h6-size);
  margin-bottom: 0.5em;
}

/* Body Text */
p {
  margin-top: 0;
  margin-bottom: 1.5em;
  font-size: var(--text-base-size);
}

/* Links */
a {
  color: var(--link-color);
  text-decoration: none;
  transition: color var(--transition-speed) ease;
}

a:hover {
  color: var(--link-hover-color);
}

/* Font Weights */
.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

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

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

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

/* Text Utilities */
.text-center {
  text-align: center;
}

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

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

.text-justify {
  text-align: justify;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

/* Text Size Utilities */
.text-xs {
  font-size: var(--text-xs);
}

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

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

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

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

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

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

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

@media (max-width: 768px) {
  html {
    font-size: 15px;
  }
  
  h1 {
    font-size: calc(var(--h1-size) * 0.9);
  }
  
  h2 {
    font-size: calc(var(--h2-size) * 0.9);
  }
  
  h3 {
    font-size: calc(var(--h3-size) * 0.9);
  }
}