:root {
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;

  --font-size-body: var(--font-size-md);
  --font-size-small: var(--font-size-sm);
  --font-size-h6: var(--font-size-lg);
  --font-size-h5: var(--fz-24px);
  --font-size-h4: var(--fz-30px);
  --font-size-h3: var(--fz-36px);
  --font-size-h2: var(--fz-48px);
  --font-size-h1: var(--fz-64px);

   /* Headlines */
  --font-size-headline-01: clamp(1.5556rem, 1.25rem + 1vw, 2.2222rem); /* 28px → 40px */
  --font-size-headline-02: clamp(1.3333rem, 1.1rem + 0.7vw, 1.7778rem); /* 24px → 32px */
  --font-size-headline-03: clamp(1.2222rem, 1.15rem + 0.3vw, 1.3889rem); /* 22px → 25px */
  --font-size-headline-04: clamp(1.1111rem, 1.05rem + 0.2vw, 1.2222rem); /* 20px → 22px */
  
  /* Display */
  --font-size-display-01: clamp(2.6667rem, 2.35rem + 0.9vw, 3.1111rem); /* 48px → 56px */

  /* Font family */
  --wp--preset--font-family-body: 'Roboto', sans-serif;
  --wp--preset--font-family-montserrat: 'Montserrat', sans-serif;

  /* Colors */
  --wp--preset--color--blue-900: #222c3d;
	
  --wp--preset--color--gray-50: #f4f4f6;
  --wp--preset--color--gray-100: #e6e7eb;
  --wp--preset--color--gray-200: #d7d9df;
  --wp--preset--color--gray-500: #888da0;
  --wp--preset--color--gray-600: #5b5f71;
  --wp--preset--color--gray-700: #444754;
  --wp--preset--color--gray-800: #292b33;
	
  --wp--preset--color--red-500: #cc4141;
	
  --wp--preset--color--teal-100: #dff7f0;
  --wp--preset--color--teal-500: #34cba2;
  --wp--preset--color--teal-700: #12926f;
  
  --wp--preset--color--orange-100: #FEF1E6;
  --wp--preset--color--orange-500: #F87E03;
  /* spacing */
  --spacing-05: 4px;
  --spacing-10: 8px;
  --spacing-15: 16px;
  --spacing-20: 20px;
  --spacing-30: 28px;
  --spacing-40: 36px;
  --spacing-50: 48px;
  --spacing-55: 52px;
  --spacing-60: 56px;
  --spacing-70: 72px;
  --spacing-80: 80px;
  --spacing-90: 90px;
  --spacing-100: 100px;
  --spacing-120: 120px;
  --spacing-140: 140px;
  /* Radius */
  --radius--rounded-xs: 4px;
  --radius--rounded-sm: 8px;
  --radius--rounded-md: 12px;
  --radius--rounded-lg: 16px;
  --radius--rounded-xl: 20px;
}

/* Admin Bar Height */ 
body.admin-bar {
	 --admin-bar-height: 32px;
}
@media (max-width: 782px) {
	body.admin-bar {
		 --admin-bar-height: 46px;
	}
}

/* Micromodal */
.modal {
  display: flex;
  justify-content: center;
  width: 100%;
  position: fixed;
  z-index: 99;
  inset: 0;
  background-color: transparent;
  color: var(--wp--preset--color--blue-900, #222c3d);
}
.modal__overlay {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.7);
}
.modal__container {
  background-color: #fff;
  margin: 1rem;
  border-radius: 30px;
  box-sizing: border-box;
  overflow: unset;
}
.modal .modal__close {
  cursor: pointer;
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 10px;
  border-radius: 100%;
  line-height: 1;
  width: 2em;
  height: 2em;
  font-size: 20px;
  background: #c2efe3; //var(--wp--preset--color--teal-100); // var(--wp--preset--color--teal-500);
  color: var(--wp--preset--color--teal-700); //#fff;
  transition: all 0.2s ease-in-out;
}
.modal .modal__close:hover, 
.modal .modal__close:focus {
	background: var(--wp--preset--color--teal-500);
	color: #fff;
}

.modal .modal__close i {
	color: inherit;
	font-size: 0.875rem;
}

/**************************\
Animation Style
\**************************/
@keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes mmslideIn {
  from {
    transform: translateY(15%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes mmslideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10%);
  }
}
.micromodal-slide {
  display: none;
}

.micromodal-slide.is-open {
  display: block;
  z-index: 99;
}

.micromodal-slide[aria-hidden=false] .modal__overlay {
  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden=false] .modal__container {
  animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden=true] .modal__overlay {
  animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden=true] .modal__container {
  animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}