@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400&family=Manrope:wght@300;400;600;800&display=swap');
 :root {
  --font-headline: "Noto Serif", serif;
  --font-body: "Manrope", sans-serif;
  --font-label: "Manrope", sans-serif;

  --color-surface: #fbf9f8;
  --color-primary: #86452a;
  --color-primary-container: #a45c40;
  --color-primary-fixed: #ffdbce;
  --color-on-primary-fixed-variant: #72351c;
  --color-tertiary: #285c75;
  --color-tertiary-container: #43758f;
  --color-on-surface: #1b1c1c;
  --color-on-surface-variant: #53433d;
  --color-outline: #86736c;
  --color-surface-container-low: #f6f3f2;
  --color-surface-container-highest: #e4e2e1;
  --color-surface-dim: #dcd9d9;
}

.blueprint-line {
  background-image: radial-gradient(#285c75 0.5px, transparent 0.5px);
  background-size: 20px 20px;
}

.hero-gradient {
  background: linear-gradient(135deg, #86452a 0%, #a45c40 100%);
}

body {
  margin: 0;
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-body);
}

::selection {
  background-color: var(--color-primary-fixed);
  color: var(--color-on-primary-fixed-variant);
}