@media (min-width: 1024px) {
  html { font-size: 24px; }  /* 16 → 24 = 150% */
}

html {
    scroll-behavior: smooth;
  }
  
 /* =========================================
    ROOT COLOR VARIABLES
 ========================================= */
 :root {
     /* Sage */
     --sage-50:#f6f8f4; --sage-100:#e9f0e4; --sage-200:#d4e1ca; --sage-300:#b5cba2;
     --sage-400:#9caf88; --sage-500:#7a9268; --sage-600:#607a4f; --sage-700:#4c623f;
     --sage-800:#3e5035; --sage-900:#35422d;
   
     /* Terracotta */
     --terracotta-50:#faf7f4; --terracotta-100:#f4ede6; --terracotta-200:#e8d8c7;
     --terracotta-300:#d4b89a; --terracotta-400:#d4a574; --terracotta-500:#c4956a;
     --terracotta-600:#b0845a; --terracotta-700:#926b4a; --terracotta-800:#77573e;
     --terracotta-900:#634936;
   
     /* Lavender */
     --lavender-50:#f9f8fb; --lavender-100:#f1eff7; --lavender-200:#e3dff0;
     --lavender-300:#d1c8e5; --lavender-400:#b8abd4; --lavender-500:#9d8bc0;
     --lavender-600:#8a7aad; --lavender-700:#756694; --lavender-800:#62557a;
     --lavender-900:#514865;
   
     /* Cream */
     --cream-50:#fefcfa; --cream-100:#fdf9f5; --cream-200:#f7f5f3; --cream-300:#f0ebe5;
     --cream-400:#e6ddd4; --cream-500:#d9ccc0; --cream-600:#c4b5a7; --cream-700:#a69687;
     --cream-800:#8b796b; --cream-900:#716156;
   }
   


   /* Common transition */
   [class^="bg-"], [class*=" bg-"] {
     transition: background-color .2s, color .2s, border-color .2s;
   }
   
   /* =========================================
      BACKGROUND UTILITIES
   ========================================= */
   .bg-sage-50 {background-color:var(--sage-50);}
   .bg-sage-100 {background-color:var(--sage-100);}
   .bg-sage-200 {background-color:var(--sage-200);}
   .bg-sage-300 {background-color:var(--sage-300);}
   .bg-sage-400 {background-color:var(--sage-400);}
   .bg-sage-500 {background-color:var(--sage-500);}
   .bg-sage-600 {background-color:var(--sage-600);}
   .bg-sage-700 {background-color:var(--sage-700);}
   .bg-sage-800 {background-color:var(--sage-800);}
   .bg-sage-900 {background-color:var(--sage-900);}
   
   .bg-terracotta-50 {background-color:var(--terracotta-50);}
   .bg-terracotta-100 {background-color:var(--terracotta-100);}
   .bg-terracotta-200 {background-color:var(--terracotta-200);}
   .bg-terracotta-300 {background-color:var(--terracotta-300);}
   .bg-terracotta-400 {background-color:var(--terracotta-400);}
   .bg-terracotta-500 {background-color:var(--terracotta-500);}
   .bg-terracotta-600 {background-color:var(--terracotta-600);}
   .bg-terracotta-700 {background-color:var(--terracotta-700);}
   .bg-terracotta-800 {background-color:var(--terracotta-800);}
   .bg-terracotta-900 {background-color:var(--terracotta-900);}
   
   .bg-lavender-50 {background-color:var(--lavender-50);}
   .bg-lavender-100 {background-color:var(--lavender-100);}
   .bg-lavender-200 {background-color:var(--lavender-200);}
   .bg-lavender-300 {background-color:var(--lavender-300);}
   .bg-lavender-400 {background-color:var(--lavender-400);}
   .bg-lavender-500 {background-color:var(--lavender-500);}
   .bg-lavender-600 {background-color:var(--lavender-600);}
   .bg-lavender-700 {background-color:var(--lavender-700);}
   .bg-lavender-800 {background-color:var(--lavender-800);}
   .bg-lavender-900 {background-color:var(--lavender-900);}
   
   .bg-cream-50 {background-color:var(--cream-50);}
   .bg-cream-100 {background-color:var(--cream-100);}
   .bg-cream-200 {background-color:var(--cream-200);}
   .bg-cream-300 {background-color:var(--cream-300);}
   .bg-cream-400 {background-color:var(--cream-400);}
   .bg-cream-500 {background-color:var(--cream-500);}
   .bg-cream-600 {background-color:var(--cream-600);}
   .bg-cream-700 {background-color:var(--cream-700);}
   .bg-cream-800 {background-color:var(--cream-800);}
   .bg-cream-900 {background-color:var(--cream-900);}
   
   
   /* =========================================
      TEXT UTILITIES
   ========================================= */
   .text-sage-50 {color:var(--sage-50);}
   .text-sage-100 {color:var(--sage-100);}
   .text-sage-200 {color:var(--sage-200);}
   .text-sage-300 {color:var(--sage-300);}
   .text-sage-400 {color:var(--sage-400);}
   .text-sage-500 {color:var(--sage-500);}
   .text-sage-600 {color:var(--sage-600);}
   .text-sage-700 {color:var(--sage-700);}
   .text-sage-800 {color:var(--sage-800);}
   .text-sage-900 {color:var(--sage-900);}
   
   .text-terracotta-50 {color:var(--terracotta-50);}
   .text-terracotta-100 {color:var(--terracotta-100);}
   .text-terracotta-200 {color:var(--terracotta-200);}
   .text-terracotta-300 {color:var(--terracotta-300);}
   .text-terracotta-400 {color:var(--terracotta-400);}
   .text-terracotta-500 {color:var(--terracotta-500);}
   .text-terracotta-600 {color:var(--terracotta-600);}
   .text-terracotta-700 {color:var(--terracotta-700);}
   .text-terracotta-800 {color:var(--terracotta-800);}
   .text-terracotta-900 {color:var(--terracotta-900);}
   
   .text-lavender-50 {color:var(--lavender-50);}
   .text-lavender-100 {color:var(--lavender-100);}
   .text-lavender-200 {color:var(--lavender-200);}
   .text-lavender-300 {color:var(--lavender-300);}
   .text-lavender-400 {color:var(--lavender-400);}
   .text-lavender-500 {color:var(--lavender-500);}
   .text-lavender-600 {color:var(--lavender-600);}
   .text-lavender-700 {color:var(--lavender-700);}
   .text-lavender-800 {color:var(--lavender-800);}
   .text-lavender-900 {color:var(--lavender-900);}
   
   .text-cream-50 {color:var(--cream-50);}
   .text-cream-100 {color:var(--cream-100);}
   .text-cream-200 {color:var(--cream-200);}
   .text-cream-300 {color:var(--cream-300);}
   .text-cream-400 {color:var(--cream-400);}
   .text-cream-500 {color:var(--cream-500);}
   .text-cream-600 {color:var(--cream-600);}
   .text-cream-700 {color:var(--cream-700);}
   .text-cream-800 {color:var(--cream-800);}
   .text-cream-900 {color:var(--cream-900);}
   
   
   /* =========================================
      BORDER UTILITIES
   ========================================= */
   .border-sage-50 {border-color:var(--sage-50);}
   .border-sage-100 {border-color:var(--sage-100);}
   .border-sage-200 {border-color:var(--sage-200);}
   .border-sage-300 {border-color:var(--sage-300);}
   .border-sage-400 {border-color:var(--sage-400);}
   .border-sage-500 {border-color:var(--sage-500);}
   .border-sage-600 {border-color:var(--sage-600);}
   .border-sage-700 {border-color:var(--sage-700);}
   .border-sage-800 {border-color:var(--sage-800);}
   .border-sage-900 {border-color:var(--sage-900);}
   
   .border-terracotta-50 {border-color:var(--terracotta-50);}
   .border-terracotta-100 {border-color:var(--terracotta-100);}
   .border-terracotta-200 {border-color:var(--terracotta-200);}
   .border-terracotta-300 {border-color:var(--terracotta-300);}
   .border-terracotta-400 {border-color:var(--terracotta-400);}
   .border-terracotta-500 {border-color:var(--terracotta-500);}
   .border-terracotta-600 {border-color:var(--terracotta-600);}
   .border-terracotta-700 {border-color:var(--terracotta-700);}
   .border-terracotta-800 {border-color:var(--terracotta-800);}
   .border-terracotta-900 {border-color:var(--terracotta-900);}
   
   .border-lavender-50 {border-color:var(--lavender-50);}
   .border-lavender-100 {border-color:var(--lavender-100);}
   .border-lavender-200 {border-color:var(--lavender-200);}
   .border-lavender-300 {border-color:var(--lavender-300);}
   .border-lavender-400 {border-color:var(--lavender-400);}
   .border-lavender-500 {border-color:var(--lavender-500);}
   .border-lavender-600 {border-color:var(--lavender-600);}
   .border-lavender-700 {border-color:var(--lavender-700);}
   .border-lavender-800 {border-color:var(--lavender-800);}
   .border-lavender-900 {border-color:var(--lavender-900);}
   
   .border-cream-50 {border-color:var(--cream-50);}
   .border-cream-100 {border-color:var(--cream-100);}
   .border-cream-200 {border-color:var(--cream-200);}
   .border-cream-300 {border-color:var(--cream-300);}
   .border-cream-400 {border-color:var(--cream-400);}
   .border-cream-500 {border-color:var(--cream-500);}
   .border-cream-600 {border-color:var(--cream-600);}
   .border-cream-700 {border-color:var(--cream-700);}
   .border-cream-800 {border-color:var(--cream-800);}
   .border-cream-900 {border-color:var(--cream-900);}
   
   
   /* =========================================
      FONT FAMILY UTILITIES
   ========================================= */
   .font-crimson {font-family:"Crimson Text", serif;}
   .font-inter {font-family:"Inter", sans-serif;}
   .font-playfair {font-family:"Playfair Display", serif;}
   
   
   /* =========================================
      ANIMATION UTILITIES
   ========================================= */
   @keyframes float {0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
   @keyframes pulse-slow {0%,100%{opacity:1;}50%{opacity:.5;}}
   @keyframes bounce-gentle {0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
   
   .animate-float {animation:float 6s ease-in-out infinite;}
   .animate-pulse-slow {animation:pulse-slow 4s cubic-bezier(0.4,0,0.6,1) infinite;}
   .animate-bounce-gentle {animation:bounce-gentle 3s infinite;}
   /* ---------- Global button feel ---------- */
button,
.btn {
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

/* Hover: subtle lift */
button:hover,
.btn:hover {
  transform: translateY(-1px);
}

/* Active: press feedback */
button:active,
.btn:active {
  transform: translateY(0) scale(0.97);
}

/* Keyboard focus (accessible & elegant) */
button:focus-visible,
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(125, 158, 145, 0.45); /* sage tone */
}

/* Disabled state */
button:disabled,
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.soft-rounded{
  border-radius: 14px;
}