/*==================================================
  TYPOGRAPHY.CSS
  Zen Spa Home
==================================================*/

/*==============================================
  BODY
==============================================*/

body{

    font-family:var(--font-family-base);

    font-size:var(--font-size-base);

    font-weight:var(--font-weight-regular);

    line-height:var(--line-height-body);

    color:var(--color-text);

}

/*==============================================
  HEADINGS
==============================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:var(--font-family-heading);

    font-weight:var(--font-weight-bold);

    color:var(--color-secondary);

    line-height:var(--line-height-heading);

    letter-spacing:-0.03em;

}

h1{

    font-size:var(--font-size-5xl);

    max-width:12ch;

}

h2{

    font-size:clamp(2.4rem,4vw,4rem);

    max-width:14ch;

}

h3{

    font-size:clamp(1.5rem,2vw,2rem);

}

h4{

    font-size:1.5rem;

}

h5{

    font-size:1.25rem;

}

h6{

    font-size:1rem;

}

/*==============================================
  PARAGRAPHS
==============================================*/

p{

    font-size:1.05rem;

    color:var(--color-text-light);

    line-height:1.9;

    max-width:62ch;

}

/*==============================================
  SMALL
==============================================*/

small{

    font-size:.875rem;

    color:var(--color-text-muted);

}

/*==============================================
  LINKS
==============================================*/

a{

    color:inherit;

    transition:color var(--transition-fast);

}

a:hover{

    color:var(--color-primary);

}

/*==============================================
  STRONG
==============================================*/

strong{

    font-weight:var(--font-weight-bold);

    color:var(--color-secondary);

}

/*==============================================
  SECTION TAG
==============================================*/

.section-tag{

    display:inline-flex;

    align-items:center;

    gap:.6rem;

    margin-bottom:1.5rem;

    font-size:.85rem;

    font-weight:600;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:var(--color-primary);

}

.section-tag::before{

    content:"";

    width:40px;

    height:1px;

    background:var(--color-primary);

}

/*==============================================
  SECTION HEADER
==============================================*/

.section-header{

    max-width:760px;

    margin:0 auto 5rem;

    text-align:center;

}

.section-header h2{

    margin-bottom:1.5rem;

}

.section-header p{

    margin:0 auto;

}

/*==============================================
  BUTTONS
==============================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.75rem;

    min-width:190px;

    height:60px;

    padding:0 2rem;

    border-radius:var(--radius-full);

    font-size:.95rem;

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

    transition:all var(--transition-base);

}

.btn-primary{

    background:var(--color-primary);

    color:#ffffff;

}

.btn-primary:hover{

    background:var(--color-primary-dark);

    transform:translateY(-3px);

}

.btn-outline{

    border:1px solid rgba(255,255,255,.25);

    color:#ffffff;

    backdrop-filter:blur(12px);

}

.btn-outline:hover{

    background:#ffffff;

    color:var(--color-secondary);

}

/*==============================================
  TEXT UTILITIES
==============================================*/

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.text-uppercase{

    text-transform:uppercase;

}

.text-primary{

    color:var(--color-primary);

}

.text-muted{

    color:var(--color-text-muted);

}

/*==============================================
  RESPONSIVE
==============================================*/

@media (max-width:992px){

    h1{

        font-size:clamp(3rem,9vw,4.8rem);

    }

    h2{

        font-size:clamp(2rem,7vw,3rem);

    }

    p{

        font-size:1rem;

    }

    .section-header{

        margin-bottom:4rem;

    }

}

@media (max-width:768px){

    h1{

        max-width:100%;

    }

    h2{

        max-width:100%;

    }

    .btn{

        width:100%;

        max-width:320px;

    }

}