/* All styling that is used for thewhole app */
 @font-face {
  font-family: "Nunito Bold";
  src: url("data/fonts/NUNITOSANS_10PT-EXTRABOLD.TTF") format("truetype");
  font-weight: 700; /* Optional: adjust as needed */
  font-style: normal;  /* Optional: adjust as needed */
}

@font-face {
  font-family: "Nunito Regular";
  src: url("data/fonts/NUNITOSANS_10PT-REGULAR.TTF") format("truetype");
  font-weight: 400; /* Optional: adjust as needed */
  font-style: normal;  /* Optional: adjust as needed */
}

@font-face {
  font-family: "Nunito Light";
  src: url("data/fonts/NUNITOSANS_10PT-LIGHT.TTF") format("truetype");
  font-weight: 300; /* Optional: adjust as needed */
  font-style: normal;  /* Optional: adjust as needed */
}


:root {
  
  --size-input: 300px;    
  --input-padding: 35px;
  --small-padding: 10px;
  --input-height: 36px;
   
}


 /*----------------------------------*/
 /* styling of the basic classes */
.primary-text {
    color: var(--text-primary);
    font-family: var(--base-font);
  }
  
  .accent-bg {
    background-color: var(--secondary-bg);
  }
  
  .accent-text {
    color: var(--accent) ;
    margin: 0;
    padding: 0, 0;
  }
  
  .danger-alert {
    color: var(--danger);
  }
  
  .success-message {
    color: var(--success);
  }
  
  /* general button styling */
  .btn-success-custom,
  .btn-danger,
  .btn-accent,
  .btn-accent-reverse {
  border-radius: 40px !important; /* rounded corners */

  width: 130px;
  height: 35px;

}




  /* Button styles */
  .btn-danger {
    background-color: var(--danger) !important;
    border-color: var(--tertiary-bg) !important;
    color: var(--text-secondary) !important;
  }
  .btn-danger:hover {
    background-color: color-mix(in srgb, var(--danger) 80%, black) !important;
    border-color: color-mix(in srgb, var(--danger) 80%, black) !important;
  }

  .btn-success-custom {
    background-color: var(--success) !important;
    border-color: var(--text-primary) !important;
    color: var(--text-secondary) !important;
  }
  .btn-success-custom:hover {
    background-color: color-mix(in srgb, var(--success) 80%, black) !important;
    border-color: color-mix(in srgb, var(--success) 80%, black) !important;
  }
  
  .btn-accent {
    background-color: var(--accent) !important;
    border-color: var(--text-secondary) !important;
    color: var(--text-secondary) !important;
  }
  .btn-accent:hover {
    background-color: color-mix(in srgb, var(--accent) 80%, black) !important;
    border-color: color-mix(in srgb, white 80%, black) !important;
  }

  .btn-accent-reverse {
    background-color: var(--primary-bg) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
  }

  .btn-accent-reverse:hover {
    background-color: color-mix(in srgb, var(--primary-bg) 50%, black) !important;
    border-color: color-mix(in srgb, var(--accent) 50%, black) !important;
  }

  
  
  

  /*----------------------------------*/
  /* styling of the basic elements */
html body {
    font-family: var(--base-font) ;
    background-color: var(--primary-bg) ;
    color: var(--text-primary) ;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font) ;
  }