/* variables.css - colors, fonts, spacing. Change the look of the whole site here. */
:root {
  --cream: #f6eddd;
  --cream-deep: #efe2c9;
  --white: #fffaf1;
  --brown: #4a3526;
  --brown-soft: #7a6250;
  --tan: #b98b5e;
  --tan-soft: #e8d8bd;
  --border: #e8d8bd;
  --star: #d9a13b;
  --error: #b5473d;
  --leaf: #8fa877;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --pill: 999px;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 64px;

  --header-h: 60px;      /* phone */
  --tap: 44px;           /* smallest size a finger can hit comfortably */
  --max: 1100px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.28s;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
/* Desktop values. Breakpoint used everywhere: 768px (tablet and up). */
@media (min-width: 768px) { :root { --header-h: 72px; } }