/* ==========================================================================
   FLORESTA+ AMAZÔNIA - TYPOGRAPHY SYSTEM
   Text styles, links, and content formatting
   ========================================================================== */

/* ==========================================================================
   DISPLAY HEADINGS (Hero titles, large section headers)
   ========================================================================== */

.display-1 {
  font-family: var(--font-family);
  font-size: var(--text-6xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

.display-2 {
  font-family: var(--font-family);
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

/* On dark backgrounds */
.on-dark .display-1,
.on-dark .display-2,
.display-1.text-white,
.display-2.text-white {
  color: var(--color-text-white);
}

/* Accent title (lime green) */
.display-accent {
  color: var(--color-green-100);
}

/* ==========================================================================
   HEADING STYLES
   ========================================================================== */

.heading-lg {
  font-size: var(--text-5xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
}

.heading-md {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
}

.heading-sm {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
}

.heading-xs {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-normal);
}

/* ==========================================================================
   BODY TEXT
   ========================================================================== */

.text-body {
  font-size: var(--text-md);
  font-weight: var(--font-normal);
  line-height: var(--leading-loose);
  color: var(--color-text-secondary);
}

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

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

/* ==========================================================================
   SPECIAL TEXT STYLES
   ========================================================================== */

/* Subtitle / Lead text */
.lead,
.subtitle {
  font-size: var(--text-xl);
  font-weight: var(--font-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* Small text / Captions */
.text-sm,
.caption {
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

/* Extra small */
.text-xs {
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
}

/* Overline (small caps labels) */
.overline {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-green-600);
}

/* ==========================================================================
   FONT WEIGHTS
   ========================================================================== */

.font-light { font-weight: var(--font-light); }
.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }
.font-extrabold { font-weight: var(--font-extrabold); }

/* ==========================================================================
   TEXT COLORS
   ========================================================================== */

.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-white { color: var(--color-text-white); }
.text-green { color: var(--color-green-600); }
.text-lime { color: var(--color-green-200); }
.text-accent { color: var(--color-green-100); }

/* ==========================================================================
   TEXT ALIGNMENT
   ========================================================================== */

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

/* ==========================================================================
   LINKS
   ========================================================================== */

a {
  color: var(--color-green-600);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--color-green-900);
}

/* Link with underline */
.link-underline {
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

/* Link with arrow */
.link-arrow::after {
  content: ' →';
  transition: transform var(--transition-base);
}

.link-arrow:hover::after {
  transform: translateX(4px);
}

/* ==========================================================================
   LISTS
   ========================================================================== */

/* Styled list with bullets */
.list-styled {
  list-style: none;
  padding: 0;
}

.list-styled li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-2);
}

.list-styled li::before {
  content: '*';
  position: absolute;
  left: 0;
  color: var(--color-green-600);
  font-weight: var(--font-bold);
}

/* Timeline bullets (from projeto page) */
.timeline-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}

.timeline-bullets li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.timeline-bullets li::before {
  content: '*';
  position: absolute;
  left: 0;
  color: var(--color-green-600);
  font-weight: var(--font-bold);
}

.timeline-bullets li:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   BLOCKQUOTES
   ========================================================================== */

blockquote,
.blockquote {
  border-left: 4px solid var(--color-green-600);
  padding-left: var(--space-6);
  margin: var(--space-6) 0;
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-text-secondary);
}

/* ==========================================================================
   CODE
   ========================================================================== */

code {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9em;
  padding: 2px 6px;
  background-color: var(--color-bg-light);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   CONTENT WRAPPER (for rich text content)
   ========================================================================== */

.content-wrapper,
.entry-content {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--color-text-secondary);
}

.content-wrapper h2,
.entry-content h2 {
  font-size: var(--text-3xl);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  color: var(--color-text-primary);
}

.content-wrapper h3,
.entry-content h3 {
  font-size: var(--text-2xl);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  color: var(--color-text-primary);
}

.content-wrapper p,
.entry-content p {
  margin-bottom: var(--space-4);
}

.content-wrapper ul,
.entry-content ul,
.content-wrapper ol,
.entry-content ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

.content-wrapper li,
.entry-content li {
  margin-bottom: var(--space-2);
}

.content-wrapper img,
.entry-content img {
  border-radius: var(--radius-lg);
  margin: var(--space-6) 0;
}

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

@media (max-width: 768px) {
  .display-1 {
    font-size: var(--text-4xl);
  }
  
  .display-2 {
    font-size: var(--text-3xl);
  }
  
  .heading-lg {
    font-size: var(--text-4xl);
  }
  
  .heading-md {
    font-size: var(--text-2xl);
  }
  
  .text-body-lg {
    font-size: var(--text-md);
  }
  
  .lead,
  .subtitle {
    font-size: var(--text-md);
  }
}