:root {
  --cream: #F7F3EE;
  --warm: #FDFAF7;
  --ink: #1C1A17;
  --ink-light: #4A4540;
  --sage: #7A9E7E;
  --sage-light: #C4D9C6;
  --sage-dark: #2E4E31;
  --terra-light: #EDD9CC;
  --terra-dark: #7A3C1E;
  --gold: #C9A84C;
  --gold-light: #F0E4C0;
  --gold-dark: #7A5A10;
  --otto: #6B4E8A;
  --otto-light: #E4DAEF;
  --fisch: #2A6B8A;
  --fisch-light: #C8E0ED;
  --fleisch: #8A5A20;
  --fleisch-light: #F5E6D0;
  --border: #E2D9D0;
  --fav: #E85D4A;
  --fav-light: #FDECEA;
  --down: #6B7280;
  --down-light: #F3F4F6;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(28,26,23,0.08);
  --shadow-lg: 0 4px 12px rgba(28,26,23,0.12);
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.5;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  line-height: 1.2;
}

a {
  color: var(--sage-dark);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input {
  font-family: inherit;
  font-size: inherit;
}

img {
  max-width: 100%;
  display: block;
}