@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@300;400;500;600&display=swap");

:root {
  --ink: #342f2a;
  --paper: #fbf9f8;
  --sand: #f3eae5;
  --gold: #dfa697;
  --olive: #a5a595;
  --terracotta: #9c7e69;
  --mist: #f6f1ed;
  --border: rgba(52, 47, 42, 0.12);
  --shadow: 0 24px 50px rgba(52, 47, 42, 0.12);
  --panel-glow: rgba(223, 166, 151, 0.25);
  --motion-quick: 140ms;
  --motion-standard: 220ms;
  --motion-slow: 320ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --text-2xs: clamp(10px, calc(0.2vw + 8px), 12px);
  --text-xs: clamp(11px, calc(0.2vw + 9px), 13px);
  --text-sm: clamp(12px, calc(0.2vw + 10px), 14px);
  --text-md: clamp(13px, calc(0.2vw + 11px), 15px);
  --text-lg: clamp(14px, calc(0.2vw + 12px), 16px);
  --text-xl: clamp(15px, calc(0.2vw + 13px), 17px);
  --text-2xl: clamp(18px, calc(0.2vw + 16px), 20px);
  --text-3xl: clamp(20px, calc(0.2vw + 18px), 22px);
  --text-4xl: clamp(22px, calc(0.2vw + 20px), 24px);
  --text-5xl: clamp(26px, calc(0.2vw + 24px), 28px);
}