/* typography.css */

@font-face {
  font-family: 'Steinbeck';
  src: url('fonts/Steinbeck-Regular.woff2') format('woff2'), /* Modern browsers */
       url('fonts/Steinbeck-Regular.woff') format('woff');   /* Older browsers */
  font-weight: 400; /* Assuming regular weight */
  font-style: normal; /* Assuming normal style */
  font-display: swap; /* Improves perceived performance */
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  /* Header Style Properties */
  --font-family-header: 'Steinbeck', sans-serif;
  --font-size-header: 24px;
  --font-style-header: normal;
  --font-weight-header: 400;
  --line-height-header: 28px; /* Consider unitless: 1 or 1.2 */

  /* Body Style Properties */
  --font-family-body: 'Steinbeck', sans-serif;
  --font-size-body: 16px;
  --font-style-body: normal;
  --font-weight-body: 400;
  --line-height-body: 24px; /* Consider unitless: 1.3 or 1.5 */
  
  /* Color Properties */
  --color-white-50: rgba(255, 255, 255, 0.5);
}

.text-header {
  font-family: var(--font-family-header);
  font-size: var(--font-size-header);
  font-style: var(--font-style-header);
  font-weight: var(--font-weight-header);
  line-height: var(--line-height-header);
}

.text-body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-style: var(--font-style-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  margin: 0px;
  margin-bottom: 16px;
}

.text-50 {
  color: var(--color-white-50);
}