/* ============================================

   DELEGATE TYPOGRAPHY TO ui-system + ui-theme

   ============================================ */

/* Typography is now fully defined in:

   - ui-theme.css (tokens)

   - ui-system.css (utilities + headings)

   This file now only contains optional display utilities and component-specific typography.

*/

.display {

  font-size: var(--font-size-display);

  font-weight: var(--weight-bold);

  line-height: var(--line-height-tight);

}



/* ========================================

 * Section Header Standardization

 * ======================================== */



.bb-section-header {

  margin: 0 0 var(--space-xl, 32px) 0;

  padding: 0;

}



.bb-section-header__title {

  font-size: var(--type-subtitle-size, clamp(1.35rem, 1.8vw + 0.4rem, 1.75rem));

  font-weight: var(--font-weight-bold, 700);

  font-family: 'Playfair Display', serif; /* CHUNK 96: Premium serif for section headers */

  line-height: var(--type-subtitle-line, 1.35);

  letter-spacing: -0.5px; /* CHUNK 96: Tighten letter spacing */

  color: var(--text);

  margin: 0 0 var(--space-xs, 8px) 0;

}



.bb-section-header__subtitle {

  font-size: var(--type-body-size, 1rem);

  font-weight: var(--font-weight-normal, 400);

  line-height: var(--type-body-line, 1.6);

  color: var(--text-muted, rgba(255, 255, 255, 0.6));

  margin: 0;

}



.bb-section-header--large .bb-section-header__title {

  font-size: var(--type-title-size, clamp(2.125rem, 3.6vw, 3rem));

  line-height: var(--type-title-line, 1.12);

  margin-bottom: var(--space-sm, 12px);

}



.bb-section-header--large .bb-section-header__subtitle {

  font-size: var(--type-subtitle-size, clamp(1.35rem, 1.8vw + 0.4rem, 1.75rem));

}



.bb-section-header--compact .bb-section-header__title {

  font-size: var(--type-body-size, 1rem);

  font-weight: var(--font-weight-semibold, 600);

  margin-bottom: var(--space-xxs, 4px);

}



.bb-section-header--compact .bb-section-header__subtitle {

  font-size: var(--type-micro-size, 0.8125rem);

}



/* ========================================

 * Unified Heading Styles

 * ======================================== */



/* Page Title (h1) */

/* CHUNK 96: Updated with Playfair Display for premium serif headlines */

.bb-page-title {

  font-size: var(--type-title-size, clamp(2.125rem, 3.6vw, 3rem));

  font-weight: var(--font-weight-bold, 700);

  font-family: 'Playfair Display', serif; /* CHUNK 96: Premium serif */

  line-height: var(--type-title-line, 1.12);

  letter-spacing: -0.5px; /* CHUNK 96: Tighten letter spacing */

  color: var(--text, #ffffff);

  margin: 0 0 var(--space-xs, 8px) 0;

}



.bb-page-subtitle {

  font-size: var(--type-body-size, 1rem);

  font-weight: var(--font-weight-normal, 400);

  line-height: var(--type-body-line, 1.6);

  color: var(--text-muted, rgba(255, 255, 255, 0.6));

  margin: 0;

}



/* Section Title (h2) */

/* CHUNK 96: Updated with Playfair Display for premium serif */

.bb-section-title {

  font-size: var(--type-subtitle-size, clamp(1.35rem, 1.8vw + 0.4rem, 1.75rem));

  font-weight: var(--font-weight-semibold, 600);

  font-family: 'Playfair Display', serif; /* CHUNK 96: Premium serif */

  line-height: var(--type-subtitle-line, 1.35);

  letter-spacing: -0.5px; /* CHUNK 96: Tighten letter spacing */

  color: var(--text, #ffffff);

  margin: 0 0 var(--space-lg, 24px) 0;

}



/* Subsection Title (h3) */

.bb-subsection-title {

  font-size: var(--type-body-size, 1rem);

  font-weight: var(--font-weight-semibold, 600);

  line-height: var(--type-body-line, 1.6);

  color: var(--text, #ffffff);

  margin: 0 0 var(--space-md, 16px) 0;

}



/* Card Title */

.bb-card-title {

  font-size: var(--type-body-size, 1rem);

  font-weight: var(--font-weight-semibold, 600);

  line-height: var(--type-body-line, 1.6);

  color: var(--text, #ffffff);

  margin: 0 0 var(--space-xs, 8px) 0;

}



/* ========================================

 * Legacy Section Header Migration

 * ======================================== */



/* Map existing section title classes to new standard */

.analytics-section-title,

.event-planner-section__title,

.history-header h1,

.favorites-header h1 {

  font-size: var(--type-subtitle-size, clamp(1.35rem, 1.8vw + 0.4rem, 1.75rem));

  font-weight: var(--font-weight-semibold, 600);

  line-height: var(--type-subtitle-line, 1.35);

  letter-spacing: var(--letter-spacing-tight, -0.02em);

  color: var(--text, #ffffff);

  margin: 0 0 var(--space-lg, 24px) 0;

}



/* ========================================

 * Typography Utilities

 * ======================================== */



.bb-text-display {

  font-size: var(--type-display-size, clamp(3rem, 6vw + 0.2rem, 4.5rem));

  font-weight: var(--font-weight-bold, 700);

  line-height: var(--type-display-line, 1.08);

  letter-spacing: var(--letter-spacing-tight, -0.02em);

}



.bb-text-title {

  font-size: var(--type-title-size, clamp(2.125rem, 3.6vw, 3rem));

  font-weight: var(--font-weight-bold, 700);

  line-height: var(--type-title-line, 1.12);

  letter-spacing: var(--letter-spacing-tight, -0.02em);

}



.bb-text-subtitle {

  font-size: var(--type-subtitle-size, clamp(1.35rem, 1.8vw + 0.4rem, 1.75rem));

  font-weight: var(--font-weight-medium, 500);

  line-height: var(--type-subtitle-line, 1.35);

}



.bb-text-body {

  font-size: var(--type-body-size, 1rem);

  font-weight: var(--font-weight-normal, 400);

  line-height: var(--type-body-line, 1.6);

}



.bb-text-micro {

  font-size: var(--type-micro-size, 0.8125rem);

  font-weight: var(--font-weight-normal, 400);

  line-height: var(--type-micro-line, 1.45);

}



/* ========================================

 * Mobile Responsive Adjustments

 * ======================================== */



@media (max-width: 768px) {

  .bb-section-header__title {

    font-size: var(--type-body-size, 1rem);

    margin-bottom: var(--space-xxs, 4px);

  }

  

  .bb-section-header__subtitle {

    font-size: var(--type-micro-size, 0.8125rem);

  }

  

  .bb-page-title {

    font-size: var(--type-subtitle-size, clamp(1.35rem, 1.8vw + 0.4rem, 1.75rem));

  }

  

  .bb-section-title {

    font-size: var(--type-body-size, 1rem);

    margin-bottom: var(--space-md, 16px);

  }

}