@font-face {
  font-family: 'MSCHN';
  src: url('/fonts/mschn/MSCHN-XL.woff2') format('woff2'),
       url('/fonts/mschn/MSCHN-XL.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MSCHN';
  src: url('/fonts/mschn/MSCHN-M.woff2') format('woff2'),
       url('/fonts/mschn/MSCHN-M.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MSCHN';
  src: url('/fonts/mschn/MSCHN-MItalic.woff2') format('woff2'),
       url('/fonts/mschn/MSCHN-MItalic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Pahin Headline';
  src: url('/fonts/pahin/Pahin-HeadlineLight.woff2') format('woff2'),
       url('/fonts/pahin/Pahin-HeadlineLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Main colors */ 
  --color-white: #FFFFFF;
  --color-green: #628B3D;
  --color-dark-green: #223214;
  --color-light-green: #F2F7EF;
  --color-honey: #F6BD60;
  --color-off-white: #FFFAF5;
  --color-peach: #FFB9B4;
  --color-pink-blush: #F5CAC3;

  /* Background colors */
  --color-background-primary: var(--color-white);
  --color-background-secondary: var(--color-light-green);
  --color-border-line: #F5CAC3;

  /* Text colors */
  --primary-text-color: var(--color-dark-green);
  --decorative-text-color: #F5CAC3;
  --text-on-color: var(--color-white);

  /* Button colors */
  --color-button-primary: var(--color-green);
  --color-button-primary-hover: var(--color-dark-green);

  /* Primary text style */
  --primary-text-font-family: 'MSCHN', sans-serif;
  --primary-text-font-size: 16px;
  --primary-text-font-weight: 500;
  --primary-text-line-height: 1.5;

  /* Small text style */
  --small-font-size: 0.8rem;
  --small-font-weight: 500;
  --small-line-height: 1;
  --small-font-style: italic;

  /* Headline level 1 text style */
  --h1-font-family: 'Pahin Headline', serif;
  --h1-font-size: 4rem;
  --h1-line-height: 0.9;
  --h1-font-weight: 700;
  --h1-letter-spacing: -0.05rem;
  --h1-text-transform: none;
  --h1-letter-spacing: normal;
  
  /* Headline level 2 text style */
  --h2-font-family: 'MSCHN', sans-serif;
  --h2-font-size: 1rem;
  --h2-line-height: 1.2;
  --h2-font-weight: 700;
  --h2-letter-spacing: 0.125rem;
  --h2-text-transform: uppercase;
  --h2-letter-spacing: normal;

  /* Spacing modifiers */
  --no-space: 0;
  --quarter-space: 4px;
  --half-space: 8px;
  --single-space: 16px;
  --double-space: 32px;
}

body {
  font-family: var(--primary-text-font-family);
  font-size: var(--primary-text-font-size);
  font-weight: var(--primary-text-font-weight);
  line-height: var(--primary-text-line-height);
  color: var(--primary-text-color);
}

p {
  font-family: var(--primary-text-font-family);
  font-size: var(--primary-text-font-size);
  font-weight: var(--primary-text-font-weight);
  line-height: var(--primary-text-line-height);
  color: var(--primary-text-color);
}

small {
  font-size: var(--small-font-size);
  font-weight: var(--small-font-weight);
  font-style: var(--small-font-style);
  line-height: var(--small-line-height);
}

h1 {
  margin: var(--no-space);
  font-family: var(--h1-font-family);
  font-size: var(--h1-font-size);
  line-height: var(--h1-line-height);
  font-weight: var(--h1-font-weight);
  letter-spacing: var(--h1-letter-spacing);
  text-transform: var(--h1-text-transform);
  color: var(--primary-text-color);
}

h2 {
  margin-top: var(--single-space);
  font-family: var(--h2-font-family);
  font-size: var(--h2-font-size);
  line-height: var(--h2-line-height);
  font-weight: var(--h2-font-weight);
  letter-spacing: var(--h2-letter-spacing);
  text-transform: var(--h2-text-transform);
  color: var(--primary-text-color); 
}

/* General styles modifiers */
.text-ampersand { color: var(--decorative-text-color); font-size: 3.4rem; margin-left: -7px; }
.text-color-secondary { color: var(--secondary-text-color) }
.text-uppercase { text-transform: uppercase }
.text-italic { font-style: italic }
.text-emphasized { font-weight: 700 }
.text-wordmark { max-width: 240px; }

/* Space modifiers */
.top-margin-half { margin-top: var(--half-space) }
.top-margin-single { margin-top: var(--single-space) }
.top-margin-single-half { margin-top: calc(var(--single-space) + var(--half-space)) }
.top-margin-double { margin-top: var(--double-space) }
.bottom-margin-half { margin-bottom: var(--half-space) }
.bottom-margin-single-half { margin-bottom: calc(var(--single-space) + var(--half-space)) }
.bottom-margin-single { margin-bottom: var(--single-space) }
.bottom-margin-double { margin-bottom: var(--double-space) }
.no-margin { margin: var(--no-space) !important; }

/* Texture background modifier */
.background-texture {
  background-color: var(--color-background-secondary);
  background-image: url('/textures/cross-texture.png');
  background-repeat: repeat;
  background-size: 10px 10px;
}