/* Design System Tokens */
:root {
  --background: #fcf9f8;
  --on-background: #1c1b1b;
  --surface: #fcf9f8;
  --on-surface: #1c1b1b;
  --surface-container: #f0eded;
  --surface-container-low: #f6f3f2;
  --surface-container-high: #eae7e7;
  --surface-container-highest: #e5e2e1;
  --surface-variant: #e5e2e1;
  --on-surface-variant: #4e4639;
  --primary: #5f5e5e;
  --secondary: #775a19;
  --outline: #7f7667;
  --outline-variant: #d1c5b4;
  --headline-font: 'Space Grotesk', sans-serif;
  --body-font: 'Noto Serif', serif;
  --label-font: 'Inter', sans-serif;
  --tranparent-white: #ffffff6d;
  --tranparent-white-faint: #ffffff3d;
  --max-width: 1536px;
}

/* Global Reset & Base Styles */
html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--background);
  color: var(--on-background);
  font-family: var(--body-font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  cursor: crosshair;
}

::selection {
  background-color: rgba(119, 90, 25, 0.3);
}

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mb-huge {
  margin-bottom: 10rem;
}