@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --paper-base: #FAF7F2;
  --text-main: #2D241E;
  --text-muted: #7A6A5C;
  --border-subtle: #E6DEC8;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--paper-base);
  color: var(--text-main);
  -webkit-tap-highlight-color: transparent;
}

.font-serif {
  font-family: 'Lora', serif;
}

/* Subtle Crumpled Paper Texture */
.paper-bg {
  background-color: #FAF7F2;
  background-image: 
    radial-gradient(ellipse at 20% 30%, rgba(240, 235, 224, 0.45) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(225, 218, 205, 0.35) 0%, transparent 60%),
    linear-gradient(115deg, transparent 40%, rgba(0, 0, 0, 0.02) 48%, rgba(255, 255, 255, 0.05) 50%, rgba(0, 0, 0, 0.025) 52%, transparent 60%),
    linear-gradient(25deg, transparent 35%, rgba(0, 0, 0, 0.015) 45%, rgba(255, 255, 255, 0.04) 47%, rgba(0, 0, 0, 0.02) 50%, transparent 62%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.035'/%3E%3C/svg%3E");
  background-attachment: fixed;
}