/* ==========================================================================
   HERBALISSA TYPOGRAPHY
   Heritage (Noto Serif) × Modernity (Manrope)
   ========================================================================== */

/* ------------------------------------------------------------------
   BASE
   ------------------------------------------------------------------ */

body {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg-lh);
  color: var(--color-on-surface);
  background-color: var(--color-surface);
}


/* ------------------------------------------------------------------
   DISPLAY — Hero statements (Noto Serif)
   ------------------------------------------------------------------ */

.display-lg {
  font-family: var(--font-display);
  font-size: var(--text-display-lg);
  line-height: var(--text-display-lg-lh);
  letter-spacing: var(--text-display-lg-tracking);
  font-weight: 400;
}

.display-md {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  line-height: var(--text-display-md-lh);
  letter-spacing: var(--text-display-md-tracking);
  font-weight: 400;
}

.display-sm {
  font-family: var(--font-display);
  font-size: var(--text-display-sm);
  line-height: var(--text-display-sm-lh);
  letter-spacing: var(--text-display-sm-tracking);
  font-weight: 400;
}


/* ------------------------------------------------------------------
   HEADLINE (Noto Serif)
   ------------------------------------------------------------------ */

.headline-lg,
h1 {
  font-family: var(--font-display);
  font-size: var(--text-headline-lg);
  line-height: var(--text-headline-lg-lh);
  font-weight: 400;
}

.headline-md,
h2 {
  font-family: var(--font-display);
  font-size: var(--text-headline-md);
  line-height: var(--text-headline-md-lh);
  font-weight: 400;
}

.headline-sm,
h3 {
  font-family: var(--font-display);
  font-size: var(--text-headline-sm);
  line-height: var(--text-headline-sm-lh);
  font-weight: 400;
}


/* ------------------------------------------------------------------
   TITLE (Manrope)
   ------------------------------------------------------------------ */

.title-lg,
h4 {
  font-family: var(--font-body);
  font-size: var(--text-title-lg);
  line-height: var(--text-title-lg-lh);
  font-weight: 600;
}

.title-md,
h5 {
  font-family: var(--font-body);
  font-size: var(--text-title-md);
  line-height: var(--text-title-md-lh);
  font-weight: var(--text-title-md-weight);
}

.title-sm,
h6 {
  font-family: var(--font-body);
  font-size: var(--text-title-sm);
  line-height: var(--text-title-sm-lh);
  font-weight: var(--text-title-sm-weight);
}


/* ------------------------------------------------------------------
   BODY (Manrope)
   ------------------------------------------------------------------ */

.body-lg {
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg-lh);
}

.body-md {
  font-size: var(--text-body-md);
  line-height: var(--text-body-md-lh);
}

.body-sm {
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm-lh);
}


/* ------------------------------------------------------------------
   LABEL — "Apothecary categorization" (Manrope, uppercase)
   ------------------------------------------------------------------ */

.label-lg {
  font-family: var(--font-body);
  font-size: var(--text-label-lg);
  line-height: var(--text-label-lg-lh);
  letter-spacing: var(--text-label-lg-tracking);
  font-weight: var(--text-label-lg-weight);
  text-transform: uppercase;
}

.label-md {
  font-family: var(--font-body);
  font-size: var(--text-label-md);
  line-height: var(--text-label-md-lh);
  letter-spacing: var(--text-label-md-tracking);
  font-weight: var(--text-label-md-weight);
  text-transform: uppercase;
}

.label-sm {
  font-family: var(--font-body);
  font-size: var(--text-label-sm);
  line-height: var(--text-label-sm-lh);
  letter-spacing: var(--text-label-sm-tracking);
  font-weight: var(--text-label-sm-weight);
  text-transform: uppercase;
}


/* ------------------------------------------------------------------
   PROSE — For long-form content (product descriptions, about page)
   ------------------------------------------------------------------ */

.prose p {
  margin-bottom: var(--space-4);
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose strong {
  font-weight: 600;
}

.prose em {
  font-style: italic;
}

.prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-outline-variant);
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--duration-fast) var(--ease-default);
}

.prose a:hover {
  text-decoration-color: var(--color-primary);
}


/* ------------------------------------------------------------------
   SELECTION
   ------------------------------------------------------------------ */

::selection {
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}