:root {
  --terracotta: #b5694e;
  --terracotta-dark: #93523a;
  --terracotta-light: #f1e2d9;
  --cream: #faf5ef;
  --cream-dark: #f3ebe1;
  --espresso: #2a211c;
  --espresso-light: #4a3d34;
  --taupe: #6e655a;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  background-color: var(--cream);
}

::selection {
  background-color: var(--terracotta);
  color: white;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

/* Native <input type="date"> can report a min-content width wider than its
   container (notably iOS Safari, which pads the pill-shaped control's own
   internal chrome). box-sizing must be forced too, since Safari's UA
   stylesheet for this control does not always inherit the global
   border-box from Tailwind's preflight. */
input[type="date"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}