/* ========================================
   CREAM CHERRY — CSS Variables
   ======================================== */
:root {
  --red:         #C8102E;
  --red-dark:    #9E0B23;
  --red-light:   #E01535;
  --red-pale:    #FFF0F2;
  --cream:       #FFF8F0;
  --cream-dark:  #F5EDE0;
  --cherry:      #8B0000;
  --white:       #FFFFFF;
  --black:       #0F0A0A;

  --gray-50:  #FAF9F8;
  --gray-100: #F2EDE8;
  --gray-200: #E5DDD6;
  --gray-400: #A89B90;
  --gray-600: #6B5E55;
  --gray-800: #2E2420;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', sans-serif;
  --font-accent:  'Caveat', cursive;

  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  --shadow-sm:   0 2px 8px rgba(200,16,46,0.08);
  --shadow-md:   0 8px 30px rgba(200,16,46,0.12);
  --shadow-lg:   0 20px 60px rgba(200,16,46,0.18);
  --shadow-card: 0 4px 20px rgba(0,0,0,0.07);

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-base:    300ms;
  --dur-slow:    600ms;

  --max-width: 1260px;
  --header-h:  72px;
}