/*
 Styles

 Notes:

 * html_base contains background color application and font imports


 */

:root {
  --app-color-black:      #0e0e0e;
  --app-color-cream:      #f0ead6;
  --app-color-amber:      #e8a030;
  --app-color-gray:       #6b6b6b;
  /* @note only use for accents.  nothing that request readability for WCAG */
  --app-color-gray-light: #555;
}

/* typography */

.font-serif {
  font-family: 'Playfair Display', serif;
}

.font-sans-serif {
  font-family: 'DM Sans', sans-serif;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

.font-cream {
  color: var(--app-color-cream);
}

.font-gray {
  color: var(--app-color-gray);
}

.font-amber {
  color: var(--app-color-amber);
}

.font-style-italic {
  font-style: italic;
}

.font-weight-light {
  font-weight: 300;
}

.font-size\:1 {
  font-size: 0.75rem;
}

.font-size\:2 {
  font-size: 0.95rem;
}

.font-size\:3 {
  font-size: 1rem;
}

.font-size\:4 {
  font-size: clamp(2.8rem, 6vw, 6rem);
}

/* components */

.title {
  text-decoration: none;
}
.title:hover {
  color: var(--app-color-amber);
}

.hero_title {
  line-height: 0.95;
}

.app-link {
}
.app-link:hover {
  color: var(--app-color-cream);
}
.app-link:active {
  color: var(--app-color-cream);
}

/* exceptions */

.bg-black {
  background-color: var(--app-color-black);
}

.border-top-gray {
  border-top: 1px solid var(--app-color-gray-light);
}

.border-bottom-gray {
  border-bottom: 1px solid var(--app-color-gray-light);
}