/**
 * Romain Garden text styles (from Figma).
 *
 * Figma `Mobile/...` counterparts override the same CSS variables at 640px —
 * use `.rgn-text-huge-title`, not a separate mobile class.
 *
 * @example
 * import "romain-garden-ds/text-styles.css";
 */

:root {
  /* HugeTitle-Visual */
  --rgn-text-huge-title-visual-font-family: "MADE Kenfolg", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --rgn-text-huge-title-visual-font-weight: 400;
  --rgn-text-huge-title-visual-font-size: 71px;
  --rgn-text-huge-title-visual-letter-spacing: 0;

  /* HugeTitle */
  --rgn-text-huge-title-font-family: "SF Pro Display", "SF Pro Text", system-ui, -apple-system, sans-serif;
  --rgn-text-huge-title-font-weight: 600;
  --rgn-text-huge-title-font-size: 69px;
  --rgn-text-huge-title-letter-spacing: 0;

  /* LargeTitle */
  --rgn-text-large-title-font-family: "MADE Kenfolg", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --rgn-text-large-title-font-weight: 400;
  --rgn-text-large-title-font-size: 25px;
  --rgn-text-large-title-letter-spacing: 0;

  /* Title (Figma: "Ttile") */
  --rgn-text-title-font-family: "MADE Kenfolg", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --rgn-text-title-font-weight: 400;
  --rgn-text-title-font-size: 17px;
  --rgn-text-title-letter-spacing: 0;

  /* Action */
  --rgn-text-action-font-family: "Manrope", "Segoe UI", system-ui, sans-serif;
  --rgn-text-action-font-weight: 800;
  --rgn-text-action-font-size: 16px;
  --rgn-text-action-letter-spacing: 0;

  /* Body */
  --rgn-text-body-font-family: "Manrope", "Segoe UI", system-ui, sans-serif;
  --rgn-text-body-font-weight: 500;
  --rgn-text-body-font-size: 16px;
  --rgn-text-body-letter-spacing: 0;

  /* BodySmall */
  --rgn-text-body-small-font-family: "Manrope", "Segoe UI", system-ui, sans-serif;
  --rgn-text-body-small-font-weight: 500;
  --rgn-text-body-small-font-size: 14px;
  --rgn-text-body-small-letter-spacing: 0;
}

@media (max-width: 640px) {
  :root {
    /* Mobile/HugeTitle-Visual */
    --rgn-text-huge-title-visual-font-family: "MADE Kenfolg", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
    --rgn-text-huge-title-visual-font-weight: 400;
    --rgn-text-huge-title-visual-font-size: 49px;
    --rgn-text-huge-title-visual-letter-spacing: 0;

    /* Mobile/HugeTitle */
    --rgn-text-huge-title-font-family: "SF Pro Display", "SF Pro Text", system-ui, -apple-system, sans-serif;
    --rgn-text-huge-title-font-weight: 600;
    --rgn-text-huge-title-font-size: 47px;
    --rgn-text-huge-title-letter-spacing: 0;

    /* Mobile/LargeTitle */
    --rgn-text-large-title-font-family: "MADE Kenfolg", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
    --rgn-text-large-title-font-weight: 400;
    --rgn-text-large-title-font-size: 25px;
    --rgn-text-large-title-letter-spacing: 0;
  }
}

.rgn-text-huge-title-visual,
.rgn-text-huge-title,
.rgn-text-large-title,
.rgn-text-title,
.rgn-text-action,
.rgn-text-body,
.rgn-text-body-small {
  margin: 0;
}

.rgn-text-huge-title-visual {
  font-family: var(--rgn-text-huge-title-visual-font-family);
  font-weight: var(--rgn-text-huge-title-visual-font-weight);
  font-size: var(--rgn-text-huge-title-visual-font-size);
  letter-spacing: var(--rgn-text-huge-title-visual-letter-spacing);
}

.rgn-text-huge-title {
  font-family: var(--rgn-text-huge-title-font-family);
  font-weight: var(--rgn-text-huge-title-font-weight);
  font-size: var(--rgn-text-huge-title-font-size);
  letter-spacing: var(--rgn-text-huge-title-letter-spacing);
}

.rgn-text-large-title {
  font-family: var(--rgn-text-large-title-font-family);
  font-weight: var(--rgn-text-large-title-font-weight);
  font-size: var(--rgn-text-large-title-font-size);
  letter-spacing: var(--rgn-text-large-title-letter-spacing);
}

.rgn-text-title {
  font-family: var(--rgn-text-title-font-family);
  font-weight: var(--rgn-text-title-font-weight);
  font-size: var(--rgn-text-title-font-size);
  letter-spacing: var(--rgn-text-title-letter-spacing);
}

.rgn-text-action {
  font-family: var(--rgn-text-action-font-family);
  font-weight: var(--rgn-text-action-font-weight);
  font-size: var(--rgn-text-action-font-size);
  letter-spacing: var(--rgn-text-action-letter-spacing);
}

.rgn-text-body {
  font-family: var(--rgn-text-body-font-family);
  font-weight: var(--rgn-text-body-font-weight);
  font-size: var(--rgn-text-body-font-size);
  letter-spacing: var(--rgn-text-body-letter-spacing);
}

.rgn-text-body-small {
  font-family: var(--rgn-text-body-small-font-family);
  font-weight: var(--rgn-text-body-small-font-weight);
  font-size: var(--rgn-text-body-small-font-size);
  letter-spacing: var(--rgn-text-body-small-letter-spacing);
}