@reference "tailwindcss";

/* Typographies */
:root {
  --font-title: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-subtitle: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-text: "Lexend", system-ui, -apple-system, sans-serif;
}

h1 {
  font-family: var(--font-title);
  @apply tracking-tight;
  font-weight: 600;
}

h1 * {
  font-weight: 600;
}

h2,
h3 {
  font-family: var(--font-subtitle);
  @apply tracking-tight font-medium;
}

h2 *,
h3 * {
  font-weight: 500;
}

h4 {
  font-family: var(--font-subtitle);
  @apply tracking-tight font-medium;
}

h4 * {
  font-weight: 500;
}

h5 {
  font-family: var(--font-subtitle);
  @apply tracking-tight font-medium;
}

h5 * {
  font-weight: 500;
}

button {
  font-family: var(--font-subtitle);
  @apply tracking-tight font-medium;
  font-weight: 900;
}

.button-font {
  font-family: var(--font-subtitle);
  @apply tracking-tight font-medium;
  font-weight: 900;
}

p {
  font-family: var(--font-text);
  font-weight: 300;
}

time {
  font-family: var(--font-text);
  font-weight: 300;
}

span:not(h1 *, h2 *, h3 *, h4 *) {
  font-family: var(--font-text);
  font-weight: 300;
}

.thomas-title {
  font-family: var(--font-title);
  @apply tracking-tight font-semibold;
}

.thomas-subtitle {
  font-family: var(--font-subtitle);
  @apply tracking-tight font-medium;
}

.font-divider {
  font-family: var(--font-subtitle);
  @apply tracking-tight font-medium;
}

.thomas-text {
  font-family: var(--font-text);
  @apply leading-relaxed;
}

.thomas-p {
  font-family: var(--font-text);
  @apply font-normal leading-relaxed;
}

.thomas-hyperlink {
  font-family: var(--font-subtitle);
  @apply font-medium;
}

.thomas-btn-label {
  font-family: var(--font-subtitle);
  @apply font-medium;
}