@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@700&display=swap');
:root {
  /* =========================
     Colors
  ========================= */



  /* Primary */
  --green-400: hsl(172, 67%, 45%);

  /* Neutral */
  --green-900: hsl(183, 100%, 15%);
  --green-800:hsl(183, 85%,21%);
  --green-750:hsl(183,79%,24%);
  --green-400:hsl(172, 67%,45%);
  --green-200:hsl(173,61%,77%);  
  --grey-600:hsl(180,25%,32%);

  --grey-550:hsl(180,18%,40%);

  --grey-500: hsl(186, 14%, 43%);
  --grey-400: hsl(184, 14%, 56%);
  --grey-300: hsl(184, 19%, 68%);
  --grey-200: hsl(185, 41%, 84%);
  --grey-50: hsl(189, 47%, 97%);

  --white: hsl(0, 100%, 100%);
  --black:hsl(0, 0%, 0%);

  --orange-400:hsl(13,70%,60%);

  /* =========================
     Typography
  ========================= */

 /* =========================
     Font Family
  ========================= */

  --ff-space-mono: "Space Mono", monospace;

  /* =========================
     Font Weights
  ========================= */

  --fw-700: 700;

  /* =========================
     Fluid Font Sizes
  ========================= */

  --fs-900: clamp(2.5rem, 2.2rem + 1vw, 3rem);       
  /* 40px → 48px */

  --fs-800: clamp(1.75rem, 1.6rem + 0.8vw, 2rem);   
  /* 28px → 32px */

  --fs-700: clamp(1.3rem, 1.2rem + 0.5vw, 1.5rem);  
  /* 21px → 24px */

  --fs-600: clamp(1.1rem, 1rem + 0.4vw, 1.25rem);   
  /* 18px → 20px */

  --fs-500: clamp(0.95rem, 0.9rem + 0.3vw, 1rem);   
  /* 15px → 16px */

  --fs-400: clamp(0.75rem, 0.72rem + 0.2vw, 0.8125rem); 
  /* 12px → 13px */

  /* =========================
     Font Presets
  ========================= */

  /* Font 1
     48px / 71px
     letter-spacing: -1px
  */
  --font-1:var(--fw-700) var(--fs-900) / 1.48 var(--ff-space-mono);

  --ls-1: -0.0625rem;

  /* Font 2
     32px / 47px
     letter-spacing: -0.67px
  */
  --font-2:var(--fw-700) var(--fs-800)/ 1.47 var(--ff-space-mono);

  --ls-2: -0.0419rem;

  /* Font 3
     24px / 36px
  */
  --font-3:var(--fw-700) var(--fs-700)/ 1.5 var(--ff-space-mono);

  --ls-3: 0;

  /* Font 4
     20px / 30px
  */
  --font-4:var(--fw-700)var(--fs-600)/ 1.5 var(--ff-space-mono);

  --ls-4: 0;

  /* Font 5
     16px / 24px
  */
  --font-5:var(--fw-700) var(--fs-500)/ 1.5 var(--ff-space-mono);

  --ls-5: 0;

  /* Font 6
     13px / 19px
  */
  --font-6:var(--fw-700) var(--fs-400)/ 1.46 var(--ff-space-mono);

  --ls-6: 0;


  /* spacing */
  --spacing-0: 0px;
--spacing-100: 8px;
--spacing-200: 16px;
--spacing-300: 24px;
--spacing-400: 32px;
--spacing-600: 48px;
--spacing-1000: 80px;
--spacing-1200: 96px;
--spacing-1500: 120px;
--spacing-1600: 128px;

/* radius */
--radius-0: 0px;
--radius-100: 4px;
--radius-200: 8px;
--radius-300: 15px;
--radius-400: 25px;



}
/* styling the calculator */
body{
    background-color: var(--grey-200);
    min-height: 100vh;
    display:grid;
    place-items: center;
    font: var(--font-5);
    color:var(--grey-500);
   
}

.calculator{
    background-color: var(--white);
    border-radius: var(--radius-400) var(--radius-400) 0 0;
    padding: var(--spacing-400) var(--spacing-300) var(--spacing-400) var(--spacing-300);
    display: flex;
    flex-direction: column;
    max-width:940px;
    
    gap: var(--spacing-400);
    margin-top: var(--spacing-200);
}
.logo{
    width:87px ;
    height:53px;
    text-align: center;
    margin-top:var(--spacing-300);
  

}
.calculator__input{
    display: flex;
    position:relative;
    flex-direction: column;
    gap: var(--spacing-200);
}
.bill_input-field:hover{
    outline: 2px solid var(--green-400);
}

.calculator__input label,
.title_clearBtn h2{
    font: var(--font-5);
   
   
}
/* title and clear button styles */
.title_clearBtn h2{
    color: var(--orange-400);
}
.title_clearBtn h2{
    cursor: pointer;
}
.title_clearBtn h2:active{
    color: var(--green-900);
}
.title_clearBtn{
    display: flex;
        justify-content: space-between;
      
}
.title_clearBtn h2:hover{
    color: var(--green-400);

}
/* inputs styles */

.bill_input .bill_input-icon,
.number_people .number_people-icon{
    position:absolute;
    left: var(--spacing-200);
    top: 65%;
    transform: translateY(-50%);
}
.bill_input-field, .number_people-field{
background-color: var(--grey-50);
border: none;
border-radius: var(--radius-200);
padding: var(--spacing-200) var(--spacing-300);
width: 100%;
text-align: right;
font: var(--font-3);
}
.bill_input-field:focus, .number_people-field:focus{
    outline: 2px solid var(--green-400);
}
.number_people-field:focus{
    outline: 2px solid var(--green-400);
}
/* options tips percentage styles */

/* styling the typogrpahy */

.calculator__select-tip{
    font: var(--font-5);
    color: var(--grey-500);
   
}
.calculator__selector,
.calculator__input{
    margin-top:var(--spacing-400);
}
.calculator__options{
    display: grid;
    margin-top: var(--spacing-200);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-200);

}
.calculator__option{
    background-color: var(--green-900);
    color: var(--white);
    font: var(--font-4);
    width:100%;
    border:none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-200) ;
    border-radius: var(--radius-200);
  
    cursor: pointer;
}
.calculator__option-input{
    background-color: var(--grey-50);
    font: var(--font-4);

    border: none;
    border-radius: var(--radius-200);
    padding: var(--spacing-200) var(--spacing-300);
    width: 100%;
    text-align: center;
}
.calculator__option:hover,.calculator__option:active, 
.calculator__option:focus, .calculator__option-input:focus,
 .calculator__option-input:hover{
    background-color: var(--green-400);
}

.calculator__option.active {
  background-color: hsl(172, 67%, 45%);
  color: white;
  border: 2px solid white;
}

/* results styles */

.calculator__results{
    background-color: var(--green-900);
    border-radius: var(--radius-300);
    padding: var(--spacing-300);
    display: flex;
  
    
    flex-direction: column;
    gap: var(--spacing-300);
    color: var(--white);
}

.calculator__result{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.calculator__result-value{
    font: var(--font-2);
    color: var(--green-400);
}
.calculator__result-tip{
    font: var(--font-2);
    color: var(--green-400);
}
.calculator__result-label{
    font: var(--font-5);
    color:white;
}
.calculator__reset{
    background-color: var(--green-400);
    color: var(--green-900);
    font: var(--font-4);
    width:100%;
    border:none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-200) ;
    border-radius: var(--radius-200);
    text-transform: uppercase;
    cursor: pointer;
    

  
  
}

.calculator__reset:hover{
    background-color: var(--green-900);
    color: var(--white);
    border: 2px solid var(--green-400);
}
.calculator__reset:disabled{
   background-color: var(--green-800);
    color: var(--green-700);
    font: var(--font-4);
    width:100%;
    border:none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-200) ;
    border-radius: var(--radius-200);
    text-transform: uppercase;
    cursor: not-allowed;
}
.calculator__result-label span{
    display: block;
    font: var(--font-6);
    color: var(--grey-400);
}


.error{
    color: var(--orange-400);
   border: 2px solid var(--orange-400);
  
   
  
}
.error__description{
    color: var(--orange-400);
    font-size: 14px;
    display: block;
    margin-top: var(--spacing-100);
}
.wrapper__title-label{
    display: flex;
    justify-content: space-between;
    align-items: center;
}